<template>
  <form onsubmit="return false;" class="game-page" @scroll="docScroll">
    <div class="game-top" :class="{ 'is-gm-self-pg': isSelfPage }">
      <div class="top-bg"
        :style="{ backgroundImage: 'url(' + (`https://img.gameui.net/article-${info.id}-${version(info.updateTime)}@2x1920.webp`) + ')', backgroundRepeat: 'no-repeat', 'background-size': '100% auto', 'background-position': 'center center' }">
      </div>
      <!-- <div class="top-bg" :style="{background:'url(https://img.gameui.net/article-7375-1678270140000@1x1920.webp) no-repeat',backgroundSize:'cover'}"></div> -->
       <div class="g-basic">
          <div class="basic">
            <div class="basic-cover">
              <img loading="lazy" class="cover"  :src="`https://img.gameui.net/article-${info.id}-${version(info.updateTime)}@2x800.webp`" alt="" v-if="info.id">
              <img loading="lazy" class="pro-title-tag" v-for="(t, tdx) in info.tagsList" :key="tdx" :title="t.title" v-if="t.image"
                :src="t.image" alt="" />
            </div>
            <div class="basic-game-info">
              <div class="time">{{ info.createTime ? info.createTime.split(' ')[0] : '' }} 添加 {{info.totalImageCount }}张</div>
              <div class="g-title"><span class="tit">{{ info.title }}</span></div>
              <div class="cate-desc" v-html="info.cate_desc_html"></div>
              <div class="user">
                <a class="img-box" :href="'/user/' + info.member.id" target="_blank">
                  <img loading="lazy" :src="info.member.avatar&&info.member.avatar!='null'?info.member.avatar:defaultAvatar" />
                </a>
                <a class="uname" :href="'/user/' + info.member.id" target="_blank">{{ info.member.userName }}
                  
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover"  v-for="tag in info.member.tagsList">
                    <i class="sm-tip" slot-content>{{tag.title}}</i>
                    <img slot="reference" loading="lazy" class="u-m-tag" :src="tag.image" alt="">
                  </el-popover>
                </a>
                <a class="follow" @click="handleFollow">{{ info.isSubscribe > 0 ? '已关注' : '关注' }}</a>
              </div>
              <div class="gm-tag-box">
                <pswiper wrapclass="game-tags" id="gameTag" ref="refGameTag" :slides="1" :betn="15"
                  prevclass="game-info-cate-page-prev" nextclass="game-info-cate-page-next">
                  <li class="swiper-slide" v-for="(tag, tdx) in info.tagsArray" :key="tdx"><a target="_blank"
                      :href="'/games?tags=' + tag">{{ tag }}</a></li>
                </pswiper>
              </div>
              <!-- <div class="company" v-if="info.manufacturer">开发：{{ info.manufacturer }}</div>
              <div class="plateform">平台：{{ info.device }}</div>
              <div class="fav-row">
                <a class="fav-to-folder" :class="{ 'active': info.collectCount > 0 }"
                  @click="handleShowFavBy(1, 'GAME', info.id)">{{ info.collectCount >
                    0 ? '已收藏' : '添加到收藏夹' }}</a>
                <a class="zan has-f-t heart-bounce" :class="{ 'active': info.praiseCount > 0 }" @mousedown="praiseDown" @mouseup="praiseUp" @mouseleave="praiseLeave" @click="handlePraiseArticle"><i class="num">{{
                    info.praise }}</i><i class="sm-tip">{{ info.praiseCount > 0 ? '取消喜欢' : '喜欢' }}</i></a>
              </div>
              <div class="game-desc-tit">游戏介绍</div>
              <div class="gm-tag-box">
                <pswiper wrapclass="game-tags" id="gameTag" ref="refGameTag" :slides="1" :betn="15"
                  prevclass="game-info-cate-page-prev" nextclass="game-info-cate-page-next">
                  <li class="swiper-slide" v-for="(tag, tdx) in info.tagsArray" :key="tdx"><a target="_blank"
                      :href="'/games?tags=' + tag">{{ tag }}</a></li>
                </pswiper>
              </div> -->
            </div>
            <!-- <div class="game-desc custom-scroll" v-html="info.content"></div> -->
          </div>
          <div class="pro-marquee-comments marquee-comments-right" id="marquee_comments_dv">
            <ul class="pro-top-comments gd-rows" v-if="topCallMembers.length>0">
              <li class="item message-slot" data-slot="0">
                <div class="sub-con" :data-emo="topCallMembers[0].oldcontent" :data-user="topCallMembers[0].member.userName">
                  <a class="u-img-box" :href="'/user/' + topCallMembers[0].member.id" target="_blank"><img loading="lazy" v-aimgd="{ avatar: topCallMembers[0].member.avatar, id: topCallMembers[0].member.id, w: 34, name: topCallMembers[0].member.userName }" @error="loadUError"/></a>
                  <div class="cmt-ri-con">
                    <div class="face-ri-l">
                      <div class="uname">{{ topCallMembers[0].member.userName }}：</div>
                      <div class="call-con">
                        为TA打call !
                      </div>
                    </div>
                    <div class="face-type-r face-type-con">
                      <div class="face-type-img" v-html="topCallMembers[0].content"></div><i class="unit">x</i><i class="call-num">{{ topCallMembers[0].num }}</i>
                    </div>
                  </div>
                </div>
              </li>
              <li class="item message-slot" data-slot="1" v-if="topCallMembers.length>1">
                <div class="sub-con" :data-emo="topCallMembers[1].oldcontent" :data-user="topCallMembers[1].member.userName">
                  <a class="u-img-box" :href="'/user/' + topCallMembers[1].member.id" target="_blank"><img loading="lazy" v-aimgd="{ avatar: topCallMembers[1].member.avatar, id: topCallMembers[1].member.id, w: 34, name: topCallMembers[1].member.userName }" @error="loadUError"/></a>
                <div class="cmt-ri-con">
                  <div class="face-ri-l">
                    <div class="uname">{{ topCallMembers[1].member.userName }}：</div>
                    <div class="call-con">
                      为TA打call !
                    </div>
                  </div>
                  <div class="face-type-r face-type-con">
                    <div class="face-type-img" v-html="topCallMembers[1].content"></div><i class="unit">x</i><i class="call-num">{{ topCallMembers[1].num }}</i>
                  </div>
                </div>
                </div>
              </li>
              <li class="item message-slot" data-slot="1" v-else>
                
              </li>
            </ul>
            <ul class="pro-top-comments gd-rows" v-else>
              <li class="item message-slot" data-slot="0">
                
              </li>
              <li class="item message-slot" data-slot="1">
                
              </li>
            </ul>
            <ul id="marquee_comments" class="pro-top-comments" :class="{'cmt-marq':isCommentAnima}">
              <div class="cmt-wrap" id="cmt_wrap">
                <template v-for="(item, idx) in comments">
                <template v-if="item.member">
                  <li class="item" @click="parentItem = item; handleReplyItem(1, item)">
                    <a class="u-img-box" :href="'/user/' + item.member.id" target="_blank">
                      <img loading="lazy"
                        v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 34, name: item.member.userName }"  @error="loadUError"/>
                    </a>
                    <div class="cmt-ri-con">
                      <div class="uname">{{ item.member.userName }}：</div>
                      <div class="cmt-html">
                        <div v-html="item.content"></div>
                        <!-- <i class="mini-time">{{ item.intervalTimeStr }}</i> -->
                        <a class="d-reply">回复</a>
                      </div>
                    </div>
                  </li>
                  <template v-if="item.commentList" v-for="(sub, sdx) in item.commentList">
                    <li class="item" @click="parentItem = item; handleReplyItem(2, sub)">
                      <a class="u-img-box" :href="'/user/' + sub.member.id" target="_blank">
                        <img loading="lazy" v-aimgd="{ avatar: sub.member.avatar, id: sub.member.id, w: 34, name: sub.member.userName }" />
                      </a>
                      <div class="cmt-ri-con">
                        <div class="uname">{{ sub.member.userName }} 回复 {{ sub.parentName }}：</div>
                        <div class="cmt-html">
                          <div v-html="sub.content"></div>
                          <!-- <i class="mini-time">{{ sub.intervalTimeStr }}</i> -->
                          
                          <a class="d-reply">回复</a>
                        </div>
                      </div>
                    </li>
                  </template>
                </template>
                </template>
                <template v-for="(item, idx) in comments" v-if="isCommentAnima">
                  <li class="item" @click="parentItem = item; handleReplyItem(1, item)">
                    <a class="u-img-box" :href="'/user/' + item.member.id" target="_blank">
                      <img loading="lazy"
                        v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 34, name: item.member.userName }" />
                    </a>
                    <div class="cmt-ri-con">
                      <div class="uname">{{ item.member.userName }}：</div>
                      <div class="cmt-html">
                        <div v-html="item.content"></div>
                        <!-- <i class="mini-time">{{ item.intervalTimeStr }}</i> -->
                        <a class="d-reply">回复</a>
                      </div>
                    </div>
                  </li>
                  <template v-if="item.commentList" v-for="(sub, sdx) in item.commentList">
                    <li class="item" @click="parentItem = item; handleReplyItem(2, sub)">
                      <a class="u-img-box" :href="'/user/' + sub.member.id" target="_blank">
                        <img loading="lazy" v-aimgd="{ avatar: sub.member.avatar, id: sub.member.id, w: 34, name: sub.member.userName }" />
                      </a>
                      <div class="cmt-ri-con">
                        <div class="uname">{{ sub.member.userName }} 回复 {{ sub.parentName }}：</div>
                        <div class="cmt-html">
                          <div v-html="sub.content"></div>
                          <!-- <i class="mini-time">{{ sub.intervalTimeStr }}</i> -->
                          <a class="d-reply">回复</a>
                        </div>
                      </div>
                    </li>
                  </template>
                </template>
              </div>
              <div class="overlay"></div>
            </ul>
            <div class="send-mbox">
              <span class="u-img">
                <img loading="lazy" v-aimgd="{ avatar: currentUser.avatar, id: currentUser.id, w: 34, name: currentUser.userName }" />
              </span>
              <div class="right">
                <input type="text" id="new_face_targetinput" autocomplete="off" @keypress.enter="handleTopSend"
                  :placeholder="replyItem.id ? '回复 @' + replyItem.member.userName : '说点什么吧...'">
                <div class="opbtns">
                  <Face txtId="new_face_targetinput" :offset="100" mod="topsend" />
                  <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
                    <i class="sm-tip" slot-content>按 Enter 键发送</i>
                    <a slot="reference" class="send-btn" @click="handleTopSend"></a>
                  </el-popover>
                </div>
              </div>
              <div class="call-mini-tip single-call-btn" :data-user="currentUser.userName" @mousedown="topCallMouseDown" @mouseup="topCallMouseUp" @mouseleave="topCallMouseLeave" @touchstart="topCallTouchStart" @touchend="topCallTouchEnd" @touchcancel="topCallTouchCancel">
                <div class="loading-indicator"></div>
                <i class="num total-count">{{info.commentCallNum}}</i>
                <i class="text">打call</i>
                <div class="tech-border-outer"></div>
                <div class="tech-border-inner"></div>
                <div class="pulse-ring" :data-user="currentUser.userName"></div>
              </div>
            </div>
            <div class="small-sys-tip">
              • 声明：限学习研究使用，禁止爬取数据，违者将依法追究责任
            </div>
          </div>
      </div>
      <!-- <div class="first-scroll" v-if="isFirstScroll">
        <span class="scroll-tip-text"></span>
        <span class="scroll-tip-icon"></span>
      </div> -->
    </div>
    <div class="game-desc custom-scroll" v-html="info.content" v-if="info.content&&info.content.length>0"></div>
    <div class="center-info" :class="{ 'n-vd': info.videoUrl.length == 0 }">
      <pswiper style="overflow-x: hidden;" :isgamevideo="true" wrapclass="dx-video-datas" id="gameVideo"
        ref="refGameVideo" :slides="1" :betn="20" prevclass="dxvd-page-prev" nextclass="dxvd-page-next">
        <li class="swiper-slide dx-vd-item" v-for="(v, idx) in info.videoUrl" :key="idx">
          <a v-if="v.type == 'sys'">
            <img loading="lazy" :src="v.url + '?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast,ar_auto'" alt="" @error="loadVideoError">
            <span class="play-icon" @click="isthird = false; currentItem = { image: v.url + '?x-oss-process=video/snapshot,t_0,f_jpg,w_0,h_0,m_fast,ar_auto', videoList: [{ content: v.url }] }; showPlay = true;"></span>
          </a>
          <a v-else class="third-play">
            <template v-if="v.oldUrl.indexOf('bilibili')>-1">
              <iframe class="ifrm-play" frameborder="0" :src="v.oldUrl" v-if="v.oldUrl.indexOf('//player')>-1"></iframe>
              <iframe class="ifrm-play" frameborder="0" :src="'https://player.bilibili.com/player.html?bvid='+v.vid+'&autoplay=0'" v-else></iframe>
            </template>
            <iframe class="ifrm-play" frameborder="0" :src="v.oldUrl" v-else></iframe>
            <!-- <iframe style="width:100%;height:100%;" :src='v.oldUrl' allowFullScreen="true"></iframe> -->
            <span class="play-icon" @click="isthird = true; currentItem = { url: v.oldUrl,vid:v.vid,type:v.type }; showPlay = true;"></span>
          </a>
        </li>
      </pswiper>
      <div class="mx-1566">
        <!-- <div class="tabs">
          <span :class="{ 'active': tabAct == 1 }" @click="tabAct = 1"
            v-if="imageList.length > 0 && actImageList.length > 0">全部</span>
          <span :class="{ 'active': tabAct == 2&&actImageList.length==0 }" @click="tabAct = 2" v-if="imageList.length > 0">常驻系统</span>
          <span :class="{ 'active': tabAct == 3 }" @click="tabAct = 3" v-if="actImageList.length > 0">活动系统</span>
        </div> 'is-stick': txtCount > 0, -->
        <div class="search-bx" :class="{ 'is-bg': isbg, 'is-game-bg': isgmbg, 'show-text-search':showText,'no-self-searhbx':!isSelfPage}" id="search_bx"  style="margin-top:30px;" v-show="imageList.length>0">
          <form onsubmit="return false;" :class="{ active: isFocus, 'disabled-input': txtCount == 0 }">
            <el-popover popper-class="gm-info-pop" placement="top" trigger="hover" v-if="txtCount == 0">
              <i class="sm-tip" slot-content>图片文字识别中，稍后可搜...</i>
              <!-- <a slot="reference" class="send-btn" @click="handleTopSend"></a> -->
              <input slot="reference" type="text" :disabled="txtCount == 0" autocomplete="off" v-model="keyword"
                id="ocr_search" @focus="onSearchFocus" @blur="isFocus = false;" @keypress.enter="onOcrSearch"
                placeholder="输入图片中的任意文字搜索..." />
            </el-popover>
            <input v-else slot="reference" type="text" autocomplete="off" v-model="keyword" id="ocr_search"
              @focus="onSearchFocus" @blur="isFocus = false;" @keypress.enter="onOcrSearch"
              placeholder="输入图片中的任意文字搜索..." />
            <a class="cancel-search" v-if="keyword" @click="handleXClear"></a>
            <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
              <i class="sm-tip" slot-content>按 L 键快速搜索</i>
              <div slot="reference" class="kj-tip">
                <span>L</span>
              </div>
            </el-popover>
          </form>
          <!-- <div class="img-text-wrap"> -->
            <div class="img-texts"  :class="{'active':showText}">
              <div class="img-text-tip">点击标签快速浏览<a class="ocr-win-close" @click="showText=false;"></a></div>
              <div class="img-text-items" @scroll="onTextsScroll">
                <a class="text" v-for="text in showTexts" :title="text.text" @click="chooseText(text)">{{ text.text }}</a>
              </div>
            </div>
          <!-- </div> -->
          <div class="text-mask" v-if="showText" @click="isFocus=false;showText=false"></div>
        </div>

        <div class="imgs-area" :style="isOcrSearch&&imageList.length==0?'min-height:1000px;padding-top:30px':''">
          <!-- 普通图 -->
          <template v-if="(tabAct == 1 || tabAct == 2) && imageList.length > 0">
            <div class="panel-tit">
              <!-- <span class="text">常驻系统</span> -->
            </div>
            <div class="gm-imgs" :class="{ 'sp-columns': info.orientation == '竖屏' }">
              <a class="img-item" :href="'/imgv/' + item.id"
                :class="{ 'active': selectIds.length > 0, 'act-bodr': item.selected }" v-for="(item, idx) in imageList"
                :key="idx" @click.prevent="() => { return false; }">
                <img loading="lazy" @click.prevent="imgDetailSourceList = imageList; handleShowInfo(item, idx)" v-lazy="item.lazy"
                  :srcset="item.srcsets" @error="(e)=>{loadError(e,idx,'img')}"/>
                <div class="global-img-fun-pos hid-el">
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                    <i class="sm-tip" slot-content>{{ item.collect ? '取消收藏' : '收藏' }}</i>
                    <a slot="reference" class="fav-btn has-f-t" :class="{ 'active': item.collect }"
                      @click.prevent="handleShowFavBy(0, 'IMG', item.id)"></a>
                  </el-popover>
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                    <i class="sm-tip" slot-content>{{ item.praise ? '取消喜欢' : '喜欢' }}</i>
                    <a slot="reference" class="global-parise-btn" :class="{ 'active': item.praise }"
                      @click.prevent="(e)=>{handlePraiseImg(item,e)}">{{item.praise_count}}</a>
                  </el-popover>
                </div>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="currentUser.id">
                  <i class="sm-tip" slot-content>多选</i>
                  <a slot="reference" class="hid-el select-btn" :class="{ active: item.selected }"
                    @click.prevent="item.selected = !item.selected"></a>
                </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                  <i class="sm-tip" slot-content>找相似</i>
                  <a slot="reference" target="_blank" @click.prevent="toSearchByImg(item)" class="hid-el xs-img-btn"></a>
                </el-popover>

                <template v-if="item.ratios">
                  <div v-for="(ot, otx) in item.ratios" :key="'rto-' + otx" :style="'width:' + ot.rw + '%;height:' + ot.rh + '%;left:' +  (ot.angle!=0&&ot.angle<0?ot.rleft-4:ot.rleft) + '%;top:' +(ot.angle!=0&&ot.angle<0?ot.rtop-4:ot.rtop) + '%;'+(ot.angle!=0?'transform:rotate('+ot.angle+'deg)':'')" class="outer-box">
                  <!-- {{ ot.angle }} -->
                  </div>
                </template>
              </a>
            </div>
          </template>

          <!-- 活动图 -->
          <template v-if="(tabAct == 1 || tabAct == 3) && actImageList.length > 0">
            <div class="panel-tit">
              <span class="text">活动系统</span>
            </div>
            <div class="gm-imgs">
              <a class="img-item" :href="'/imgv/' + item.id"
                :class="{ 'active': selectIds.length > 0, 'act-bodr': item.selected }" v-for="(item, idx) in actImageList"
                :key="idx" @click.prevent="() => { return false; }">
                <img loading="lazy" @click.prevent="imgDetailSourceList = actImageList; handleShowInfo(item, idx)"
                  v-lazy="item.imgLazy"  @error="(e)=>{loadError(e,idx,'act')}"/>
                <div class="global-img-fun-pos hid-el">
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                    <i class="sm-tip" slot-content>{{ item.collect ? '取消收藏' : '收藏' }}</i>
                    <a slot="reference" class="fav-btn has-f-t" @click.prevent="handleShowFavBy(0, 'IMG', item.id)"></a>
                  </el-popover>
                  <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                    <i class="sm-tip" slot-content>{{ item.praise ? '取消喜欢' : '喜欢' }}</i>
                    <a slot="reference" class="global-parise-btn"  :class="{ 'active': item.praise }" 
                    @click.prevent="(e)=>{handlePraiseImg(item,e)}">{{item.praise_count}}</a>
                  </el-popover>
                </div>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="currentUser.id">
                  <i class="sm-tip" slot-content>多选</i>
                  <a slot="reference" class="hid-el select-btn" :class="{ active: item.selected }"
                    @click.prevent="item.selected = !item.selected"></a>
                </el-popover>
                <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover">
                  <i class="sm-tip" slot-content>找相似</i>
                  <a slot="reference" target="_blank" @click.prevent="toSearchByImg(item)" class="hid-el xs-img-btn"></a>
                </el-popover>

                <template v-if="item.ratios">
                  <div v-for="(ot, otx) in item.ratios" :key="'rto-' + otx"
                    :style="'width:' + (ot.otwidth / ot.imgWidth) * 100 + '%;height:' + (ot.otheight / ot.imgHeight) * 100 + '%;left:' + (ot.otcenterX / ot.imgWidth) * 100 + '%;top:' + (ot.otcenterY / ot.imgHeight) * 100 + '%'"
                    class="outer-box"></div>
                </template>
              </a>
            </div>
          </template>
 
          <div class="pro-bot-loading" style="margin-top:300px;" v-if="isLoading">
              <i class="el-icon-loading"></i>
          </div>
          <div class="no-more-text" v-if="!hasMore&&!isLoading&&imageList.length>0">没有更多了</div>

          <div class="b-empty-box" v-if="isOcrSearch && imageList.length == 0 && !isLoading" >
            <Empty text="没有找到符合条件的结果~"/>
            <a class="bsearch" :href="'/searchs?t=&k='+keyword" target="_blank">扩大范围继续搜索</a>
          </div>
        </div>

        <!-- 喜欢 -->
        <div class="zan-row">
          <el-popover popper-class="gm-info-pop" placement="top" trigger="hover">
            <i class="sm-tip" slot-content>喜欢此内容</i>
            <a slot="reference" class="zan-btn" :class="{ 'active': info.praiseCount > 0 }"
              @click="handlePraiseArticle">
              <i>{{ info.praise }}</i>
            </a>
          </el-popover>
        </div>

        <!-- 最新喜欢 -->
        <div class="new-zans">
          <span class="text">最新喜欢</span>
        </div>
        <div class="new-zan-uimgs">
          <a class="item" v-for="(item, i) in lastPraiseList" :key="i"><img loading="lazy"
              v-aimgd="{ avatar: item.member.avatar, id: item.member.id, w: 40, name: item.member.userName }" /></a>
        </div>

        <!-- 其他功能 -->
        <div class="panel-tit">
          <span class="text">相关游戏</span>
          <div class="other-ops">
            <a class="jubao-btn" @click="showFeedBack = true">举报</a>
            <a class="share-btn" @click="handleShare">分享</a>
            <a class="fav-btn" @click="handleShowFavBy(1, 'GAME', info.id)">收藏</a>
          </div>
        </div>

        <!-- 相关游戏 -->
        <div class="xg-games">
          <a class="bdl-data-item" v-for="(item, i) in recommends" :key="i" target="_blank" :href="'/game/' + item.id">
            <img loading="lazy" v-imgd="{ id: item.id, w: 800, uptime: item.updateTime }" alt="">
            <div class="basic-info hid-el">
              <div class="title">{{ item.title }}</div>
              <div class="bot-desc">
                <span class="pnum">{{ item.totalImageCount }}</span>
                <span class="uname">{{ item.member.userName }}</span>
              </div>
            </div>
            <div class="left-icos">
              <!-- <img loading="lazy" src="../../assets/pro/common/hot.png" alt="" v-if="item.hot"> -->
            <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.new'>
                <i class="sm-tip" slot-content>48小时内发布的最新内容</i>
                <img loading="lazy" slot="reference" src="../../assets/pro/common/new.png" alt="">
            </el-popover>
              <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if="item.hot">
                <i class="sm-tip" slot-content>浏览量超2万的热门内容</i>
                <img loading="lazy" slot="reference" src="../../assets/pro/common/hot.png" alt="">
              </el-popover>
              <el-popover popper-class="gm-info-pop" placement="top-start" trigger="hover" v-if='item.videoUrl'>
                <i class="sm-tip" slot-content>内容含视频</i>
                <img loading="lazy" slot="reference" src="../../assets/pro/common/video.png" alt="">
              </el-popover>
            </div>
            <div class="right-icos hid-el" v-if="item.tagsList && item.tagsList.length > 0">
              <img loading="lazy" style="margin-left: 5px" v-for="(t, tdx) in item.tagsList" :key="tdx" :title="t.title" v-if="t.image"
                :src="t.image" alt="" />
            </div>
            <div class="con-mask hid-el"></div>
          </a>
        </div>
      </div>

    </div>

    <!-- 评论 -->
    <Comment ref="refComment" :callmembers="callMembers" :callmembertotal="callMemberTotal" :isgame="true" :moduleId="info.id" v-if="info.id" @change="onCommentChang" />

    <!-- 右侧浮动区 -->
    <div class="info-right-bar" v-if="showFbar">
      <el-popover popper-class="gm-info-pop" placement="left" trigger="hover">
        <i class="sm-tip" slot-content>进入作者主页</i>
        <span slot="reference" class="rbtm user">
          <a :href="'/user/' + info.member.id" target="_blank"><img loading="lazy" :src="info.member.avatar&&info.member.avatar!='null'?info.member.avatar:defaultAvatar" /></a>
          <a class="follow-btn" @click="handleFollow" title="关注TA" v-if="info.isSubscribe != 1"></a>
        </span>
      </el-popover>
      <el-popover popper-class="gm-info-pop" placement="left" trigger="hover">
        <i class="sm-tip" slot-content>长按这里，连续为TA打CALL</i>
        <!-- @click="handleCall" -->
        <span slot="reference" class="rbtm support-btn icon-container" :data-user="currentUser.userName" @mousedown="callMousedown" @touchstart="callTouchStart">
          <div class="loading-indicator"></div>
          <i class="num total-count" v-show="info.commentCallNum > 0">{{ info.commentCallNum > 9999 ? '9w+' :
            info.commentCallNum
            }}</i>
          <i class="text">打call</i>
          
          <div class="tech-border-outer"></div>
          <div class="tech-border-inner"></div>
          <div class="pulse-ring" :data-user="currentUser.userName"></div>
        </span>
      </el-popover>
      <el-popover popper-class="gm-info-pop" placement="left" trigger="hover">
        <i class="sm-tip" slot-content>发表评论</i>
        <span slot="reference" class="rbtm comment-btn" @click="toCommentArea">
          <i class="num" v-if="info.commentNum&&info.commentNum>0">{{ info.commentNum  }}</i>
          <i class="text">评论</i>
        </span>
      </el-popover>
      <el-popover popper-class="gm-info-pop" placement="left" trigger="hover">
        <i class="sm-tip" slot-content>喜欢此内容</i>
        <span slot="reference" class="rbtm zan-btn" :class="{ 'active': info.praiseCount > 0 }"
          @click="handlePraiseArticle">
          <i class="num" v-if="info.praise > 0">{{ info.praise}}</i>
          <i class="text">喜欢</i>
        </span>
      </el-popover>
      <el-popover popper-class="gm-info-pop" placement="left" trigger="hover">
        <i class="sm-tip" slot-content>添加到收藏夹</i>
        <span slot="reference" class="rbtm fav-btn" :class="{ 'active': info.collectCount > 0 }"
          @click="handleShowFavBy(1, 'GAME', info.id)">
          <i class="num" v-if="info.collectNum > 0">{{ info.collectNum }}</i>
          <i class="text">收藏</i>
        </span>
      </el-popover>
      <el-popover popper-class="gm-info-pop" placement="left" trigger="hover">
        <i class="sm-tip" slot-content>返回到顶部</i>
        <span slot="reference" class="rbtm take-top" @click="handleTop">
        </span>
      </el-popover>

      <!-- <span class="comment-btn" @click="toCommentArea">
        <i class="num">{{ info.commentNum > 99 ? '99+' : info.commentNum }}</i>
        <i class="text">评论</i>
      </span>
      <span class="zan-btn" :class="{ 'active': info.praiseCount > 0 }" @click="handlePraiseArticle">
        <i class="num">{{ info.praise > 99 ? '99+' : info.praise }}</i>
        <i class="text">喜欢</i>
      </span>
      <span class="fav-btn" :class="{ 'active': info.collectCount > 0 }" @click="showFav = true">
        <i class="num">{{ info.collectNum > 99 ? '99+' : info.collectNum }}</i>
        <i class="text">收藏</i>
      </span>
      <span class="take-top" @click="handleTop">
      </span> -->
    </div>

    <ImgDetail @close="onInfoClose" :imgurl="currentImgUrl" :imgid="curImgId" :olist="imgDetailSourceList"
      :viewidx="curViewidx" v-if="showInfo" />

    <a-modal v-model="showFav" destroyOnClose centered :footer="null" :closable="false" width="471px">
      <Fav :favmodule="favBy" @close="showFav = false" :foldertype="foldertype" :imgids="currentIds" :articleid="favId"
        @favsucc="onFavSucc" />
    </a-modal>

    <a-modal v-model="showFeedBack" destroyOnClose centered :footer="null" :closable="false" width="670px">
      <FeedBack ref="refFeedBack" :targetid="info.id" :targettype="1" @close="showFeedBack = false" />
    </a-modal>

    <PlayVideo v-if="showPlay" :isthird="isthird" :data="currentItem" @close="showPlay = false"
      :ismustoverflow="true" />

    <div class="select-d-fix" :class="{ active: selectIds.length > 0 }">
      <div class="box">
        <div class="num">
          已选中<i>{{ selectIds.length }}</i>个 <i class="cancel-select" @click="handleCancelSelect"></i>
        </div>
        <a class="select-all" @click="handleSelectAll">{{ isCkAll ? '取消全选' : '全选' }}</a>
        <a class="fav-to" @click="favId = ''; foldertype = 0; showFav = true">保存到收藏</a>
        <!-- <a class="download-to" @click="handleDownloads">下载选中</a> -->
        <a class="praise-to" @click="handleBatchPraise">保存到喜欢</a>
      </div>
    </div>
  </form>
</template>

<script>
import Empty from '@/components/Empty'
import FeedBack from '@/components/feedBack'
import PlayVideo from '@/components/playvideo'
import Comment from '@/components/Comment'
import Face from '@/components/face'
import pswiper from '@/components/pswiper'
import Fav from '@/components/Fav'
import ImgDetail from '@/components/ImgDetail'
import SparkMD5 from 'spark-md5'
import api from '@/api/api'

export default {
  components: { ImgDetail, Fav, pswiper, Face, Comment, PlayVideo, FeedBack, Empty },
  data() {
    return {
      topCallMembers:[],
      isScroll:false,
      oldTexts:[],
      showTexts:[],
      textPageIdx:1,
      textTotalPage:0,
      isToOckBox:false,
      showText:false,
      texts:[],
      isCommentAnima:false,
      iconContainer:null,
      callMemberTotal:0,
      callMembers:[],
      txtCount: 0,
      isFirstScroll: false,
      parentItem: null,
      replyItem: {},
      currentIds: [],
      marquee: null,
      isFocus: false,
      isLoading: true,
      keyword: '',
      scrollLoaded: true,
      hasMore: true,
      isOcrSearch: false,
      isthird: false,
      isSelfPage: false,
      favBy: 'GAME',
      showFeedBack: false,
      imgDetailSourceList: [],
      isgmbg: false,
      favId: '',
      foldertype: 1,
      isCkAll: false,
      imageList: [],
      actImageList: [],
      showFbar: false,
      isbg: false,
      showPlay: false,
      currentItem: {},
      imgdatas: [],
      tabAct: 1,
      commentTotal: 0,
      showFav: false,
      curFullPath: '',
      currentImgUrl: '',
      curViewidx: 0,
      showInfo: false,
      curImgId: '',
      currentUser: {},
      topcmtVal: '',
      recommends: [],
      lastPraiseList: [],
      last: '',
      emdata: {
        em1: {},
        em2: {},
        em3: {},
        em4: {},
        em5: {}
      },
      defaultAvatar: require('../../assets/pro/default_uimg.svg'),
      info: {
        commentCallNum: 0,
        imagesBean: {
          imageList: []
        },
        member: {
          tagsList: []
        },
        tagsArray: [],
        videoUrl: ''
      },
      commentParams: {
        pageNum: 1,
        pageSize: 10,
        parentId: 0,
        commentId: '',
        orderByColumn: 'createTime',
        isAsc: 'desc'
      },
      comments: [],
      commentVal: '',
      commentTimer: null,
      oldSource: [{}, {}],
      callParam: {
        clickCount: 0,
        totalCount: 0,
        consecutiveCount: 1,
        pressTimer: null,
        isPressed: false,
        lastClickTime: 0,
        isRequesting: false,
        clickCooldown: 50,
        currentBatchCount: 0
      },
      isTopCall:false,
      topCallParam:{
        emoIdx:-1,
        emoStr:'',
        overCount:0,
        userCounts:new Map(),
        handleButton:null,
        CLICK_TIMEOUT:1500,
        PRESS_INTERVAL:200,
        isProcessing:false,
        currentSlot:0,
        isPressed:false,
        pressInterval:null,
        resetTimeout:null
      },
      fullScPraiseParam:{
        isAnimating:false,
        lastTime:0,
        CONFIG:{
          particleCount: {
              mobile: 15,
              tablet: 20, 
              desktop: 25
          },
          cooldown: 1500
        }
      },
      fullCallParam:{
        isAnimating:false,
        lastTime:0,
        CONFIG:{
            colors: ['#FFD700', '#FF69B4', '#FF4500', '#9370DB', '#FFA500', '#00CED1', '#FF1493'],
            shapes: ['strip', 'square', 'circle', 'wave', 'star'],
            particleCount: {
                mobile: 20,
                tablet: 25,
                desktop: 30
            },
            cooldown: 1500,
        }
      }
    }
  },
  props: ['id'],
  methods: {
    loadUError(e){
      e.target.src=this.defaultAvatar;
      e.target.removeAttribute('srcset');
    },
    paginateArray(array, pageSize, page) {
        // 计算分页后的子数组开始和结束索引
        const start = (page - 1) * pageSize;
        const end = start + pageSize;
    
        // 返回分页后的子数组
        return array.slice(start, end);
    },
    onTextsScroll(e){
      if(this.scrollLoaded==false)return;
      let that=this;
      let spacNum = e.target.scrollHeight - ($(e.target).scrollTop() + $(e.target).height())
      if (spacNum < 1&&this.textPageIdx<this.textTotalPage) {
        this.textPageIdx++;
        let texts=this.paginateArray(this.texts,54,this.textPageIdx);
        
        this.showTexts=[...this.showTexts,...texts];
        setTimeout(()=>{
          that.scrollLoaded=true;
        },1500)
      }
    },
    loadVideoError(e){
      e.target.parentNode.parentNode.remove();
    },
    loadError(e,idx,_type){
      e.target.removeAttribute('srcset');
      if(_type=='img'){
        e.target.style.width='100%';
        e.target.style.height='100%';
        e.target.parentNode.style.height='200px';
        // this.imageList.splice(idx,1);
      }else{
        e.target.style.width='100%';
        e.target.style.height='100%';
        e.target.parentNode.style.height='200px';
        // this.actImageList.splice(idx,1);
      }
    },
    async handleBatchPraise(e){
      let res=await api.batchAddPraise({type:4,praiseIds:this.currentIds.join(',')});
      let that=this;
      if(res.code==0){
        this.imageList.map((item) => {
          if(that.currentIds.includes(item.id)){
            item.selected=false;
            item.parse=true;
            item.praise_count+=1;
          }
        })
        this.createHearts(e.target);
        this.$bhelper.addCirRecord('FAV');
        this.$bhelper.addCirRecord('FAV-IMG');
        this.$store.dispatch('setLeftMenu',[])
        
        
        this.$amessage.success('已喜欢，品味不错哦～')
      }else{
        this.imageList.map((item) => {
          if(that.currentIds.includes(item.id)){
            item.selected=false;
          }
        })
      }
    },
    removeMessage(message) {
        return new Promise(resolve => {
            message.classList.add('fade-out');
            setTimeout(() => {
                message.remove();
                resolve();
            }, 500);
        });
    },
    async createGiftMessage(username,count){
      if (this.topCallParam.isProcessing) return;
          this.topCallParam.isProcessing = true;

          try {
              if(!this.topCallParam.emoStr){
                let emoarray = [5, 17, 16, 20, 28];
                let _num = Math.ceil(Math.random() * 5);
                let emoStr = emoarray[_num-1] == undefined ? '[call_em_16]' : '[call_em_' + emoarray[_num-1] + ']';
                this.topCallParam.emoIdx=emoarray[_num-1] == undefined?16:emoarray[_num-1];
                this.topCallParam.emoStr=emoStr;
              }
              
              const existingMessage = document.querySelector(`.sub-con[data-user="${username}"][data-emo="${this.topCallParam.emoStr}"]`);
              
              this.topCallParam.overCount=count;

              if (existingMessage) {
                  this.topCallParam.emoStr=existingMessage.getAttribute('data-emo');
                  // this.topCallParam.emoStr=existingMessage.getAttribute('data-emo');
                  const countElement = existingMessage.querySelector('.call-num');
                  countElement.textContent = `${count}`;
                  countElement.classList.remove('scale');
                  void countElement.offsetWidth;
                  countElement.classList.add('scale');
                  this.topCallParam.isProcessing = false;
                  return;
              }

              this.topCallParam.currentSlot = (this.topCallParam.currentSlot + 1) % 2;
              let targetSlot = document.querySelector(`.message-slot[data-slot="${this.topCallParam.currentSlot}"]`);
              
              let subEl=document.querySelector(`.sub-con[data-user="${username}"]`);
              if(subEl){
                targetSlot=subEl.parentNode;
                subEl.classList.add('fade-out');
                subEl.remove();
              }
              else{
                const oldMessage = targetSlot.querySelector('.sub-con');
                if (oldMessage) {
                    oldMessage.classList.add('fade-out');
                    oldMessage.remove();
                }
              }
              
              
              const message = document.createElement('div');
              message.className = 'sub-con new';
              message.setAttribute('data-user', username);
              message.setAttribute('data-emo', this.topCallParam.emoStr);
              message.innerHTML = `
                  <a class="u-img-box" href="/user/${this.currentUser.id}" target="_blank"><img loading="lazy" src="${this.currentUser.avatar}"/></a>
                  <div class="cmt-ri-con">
                    <div class="face-ri-l">
                      <div class="uname">${username}：</div>
                      <div class="call-con">为TA打call !</div>
                    </div>
                    <div class="face-type-r face-type-con">
                      <div class="face-type-img"><img loading="lazy" src="${this.$webdomainurl}/emoji/${this.topCallParam.emoIdx}.svg?1732499774000'}"/></div>
                      <i class="unit">x</i>
                      <i class="call-num">${count}</i>
                    </div>
                  </div>
              `;

              targetSlot.appendChild(message);
          } finally {
              this.topCallParam.isProcessing = false;
          }
    },
    handleGift(){
      let that=this;
      const username = this.topCallParam.handleButton.getAttribute('data-user');
      const currentTime = Date.now();
      
      if (!this.topCallParam.userCounts.has(username) || 
          currentTime - this.topCallParam.userCounts.get(username).lastTime > this.topCallParam.CLICK_TIMEOUT) {
            this.topCallParam.userCounts.set(username, { count: 0, lastTime: 0 });
      }

      const userData = this.topCallParam.userCounts.get(username);
      userData.count++;
      userData.lastTime = currentTime;

      this.createGiftMessage(username, userData.count);

      clearTimeout(this.topCallParam.resetTimeout);
      this.topCallParam.resetTimeout = setTimeout(() => {
          if (!that.topCallParam.isPressed) {
              userData.count = 0;
          }
      }, this.topCallParam.CLICK_TIMEOUT);
    },
    topCallMouseDown(e){
      this.isTopCall=true;
      this.iconContainer=e.target;
      let ckPass = this.$bhelper.checkLogin(this);
      if (!ckPass) return;
      this.topCallParam.handleButton=e.target.parentNode;
      this.topCallParam.isPressed = true;
      this.handleGift();
      this.topCallParam.pressInterval = setInterval(this.handleGift, this.topCallParam.PRESS_INTERVAL);

      this.singleAnima();
    },
    singleAnima(){
      const offsetX = (Math.random() - 0.5) * 20;

      this.createFloatingCount(offsetX);
      this.createCallRing();
      this.callParam.pressTimer = setTimeout(this.singleAnima, 100);
    },
    //顶部打call回调
    async topCallMouseUp(e){
      clearTimeout(this.callParam.pressTimer);
      this.topCallParam.isPressed = false;
      clearInterval(this.topCallParam.pressInterval);

      if(this.topCallParam.overCount>0)
      {
        let res = await api.addComment({ parentId: 0, type: 0, commentStatus: 3, commentId: this.id, content: this.topCallParam.emoStr,count:this.topCallParam.overCount })
        if (res.code == 0) {
          this.createConfetti(e);
          this.topCallParam.emoStr='';
          this.topCallParam.emoIdx=-1;
          // 模拟服务器返回新的总数
          this.callParam.totalCount += this.topCallParam.overCount;

          this.updateTotalCount();
          
          this.$amessage.success('应援成功！气氛在燃烧');

          this.info.commentCallNum+=this.topCallParam.overCount;

          // this.getCallMembers();
          this.$refs['refComment'].getCallTotal();
        }
      }
    },
    topCallMouseLeave(){
      this.topCallParam.isPressed = false;
      clearInterval(this.topCallParam.pressInterval);
    },
    topCallTouchStart(){
      e.preventDefault();
      this.topCallParam.isPressed = true;
      this.handleGift();
      pressInterval = setInterval(this.handleGift, this.topCallParam.PRESS_INTERVAL);
    },
    topCallTouchEnd(){
      this.topCallParam.isPressed = false;
      clearInterval(this.topCallParam.pressInterval);
    },
    topCallTouchCancel(){
      this.topCallParam.isPressed = false;
      clearInterval(this.topCallParam.pressInterval);
    },
    //底部打call 回调
    async handleCall(count) {
      let that=this;
      let iconContainer =this.iconContainer;
      if (count <= 0 || this.callParam.isRequesting) return;

      try {
        this.callParam.isRequesting = true;
        iconContainer.classList.add('loading');

        // 模拟API请求，实际使用时替换为真实接口
        
        let ckPass = this.$bhelper.checkLogin(this);
        if (!ckPass) return;
        let emoarray = [5, 17, 16, 20, 28];
        let _num = Math.ceil(Math.random() * 5);
        let emoStr = emoarray[_num-1] == undefined ? '[call_em_16]' : '[call_em_' + emoarray[_num-1] + ']';

        let res = await api.addComment({ parentId: 0, type: 0, commentStatus: 3, commentId: this.id, content: emoStr,count:count })
        if (res.code == 0) {
          this.createConfetti();
          // 模拟服务器返回新的总数
          this.callParam.totalCount += count;

          this.updateTotalCount();
          
          this.$amessage.success('应援成功！气氛在燃烧');

          let id = 'd_call_img_' + Date.parse(new Date());
          $(that.iconContainer).append('<img loading="lazy" id="' + id + '" class="d-call-img" src="'+this.$webdomainurl+'/emoji/' + emoarray[_num] + '.svg' + '" alt="">');
          setTimeout(function () {
            $(that.iconContainer).find('#' + id).remove();
          }, 1500)

          this.info.commentCallNum+=count;

          this.$refs['refComment'].getCallTotal();

        }

      } catch (error) {
        console.error('Error sending count:', error);
      } finally {
        this.callParam.isRequesting = false;
        iconContainer.classList.remove('loading');
        this.callParam.currentBatchCount = 0;
      }
    },
    debounce(func, wait) {
      let timeout;
      return function executedFunction(...args) {
        const later = () => {
          clearTimeout(timeout);
          func(...args);
        };
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
      };
    },
    updateTotalCount() {
      const totalCountElement = document.querySelector('.total-count');
      totalCountElement.textContent = this.callParam.totalCount >= 1000 ?
        `${(totalCount / 1000).toFixed(1)}k` : `${this.callParam.totalCount}`;

      if (this.callParam.totalCount > 0) {
        totalCountElement.style.display = 'block';
      }
    },
    createFloatingCount(offsetX = 0) {
      let iconContainer = document.querySelector('.support-btn');
      iconContainer=this.iconContainer;
      const currentTime = Date.now();
      if (currentTime - this.callParam.lastClickTime < this.callParam.clickCooldown) return;
      this.callParam.lastClickTime = currentTime;

      this.callParam.clickCount++;
      this.callParam.currentBatchCount++;

      const count = document.createElement('div');
      count.className = 'floating-count';
      count.textContent = `x${this.callParam.consecutiveCount}`;
      this.callParam.consecutiveCount++;

      count.style.left = `calc(50% + ${offsetX}px)`;
      count.style.top = '0';
      count.style.animation = 'floatUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards';

      iconContainer.appendChild(count);
      setTimeout(() => count.remove(), 1000);

      this.updateTotalCount();
    },
    createCallRing() {
      let iconContainer = document.querySelector('.support-btn');
      iconContainer=this.iconContainer;
      const ring = document.createElement('div');
      ring.className = 'ring';
      ring.style.animation = 'ringExpand 0.6s ease-out forwards';
      iconContainer.appendChild(ring);
      setTimeout(() => ring.remove(), 600);
    },
    createCallParticles() {
      let iconContainer = document.querySelector('.support-btn');
      iconContainer=this.iconContainer;
      const particleCount = 12;
      const colors = ['#ff5c84', '#ff89a8', '#ffb4b4', '#ffffff'];

      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';

        const angle = (i / particleCount) * 2 * Math.PI;
        const distance = 60 + Math.random() * 40;
        const tx = Math.cos(angle) * distance;
        const ty = Math.sin(angle) * distance;

        particle.style.setProperty('--tx', `${tx}px`);
        particle.style.setProperty('--ty', `${ty}px`);
        particle.style.animation = 'explode 0.6s ease-out forwards';
        particle.style.background = colors[Math.floor(Math.random() * colors.length)];

        const size = 4 + Math.random() * 6;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;

        iconContainer.appendChild(particle);
        setTimeout(() => particle.remove(), 600);
      }
    },
    vibrateDevice() {
      let iconContainer = document.querySelector('.support-btn');
      iconContainer=this.iconContainer;
      if ('vibrate' in navigator) {
        navigator.vibrate(5);
      }
      iconContainer.classList.add('vibrate');
      setTimeout(() => iconContainer.classList.remove('vibrate'), 100);
    },
    startContinuousCount() {
      if (!this.callParam.isPressed || this.callParam.isRequesting) return;

      const offsetX = (Math.random() - 0.5) * 20;

      this.createFloatingCount(offsetX);
      this.createCallRing();
      this.createCallParticles();
      this.vibrateDevice();

      const delay = 100;
      this.callParam.pressTimer = setTimeout(this.startContinuousCount, delay);
    },
    stopCounting() {
      if(this.isTopCall)return;
      const debouncedSendCount = this.debounce(this.handleCall, 300);
      this.callParam.isPressed = false;
      this.callParam.consecutiveCount = 1;
      if (this.callParam.pressTimer) {
        clearTimeout(this.callParam.pressTimer);
        this.callParam.pressTimer = null;
      }
      if (this.callParam.currentBatchCount > 0) {
        debouncedSendCount(this.callParam.currentBatchCount);
      }
    },
    callMousedown(e) {
      this.isTopCall=false;
      let ckPass = this.$bhelper.checkLogin(this);
      if (!ckPass) return;
      this.iconContainer=e.target;
      if (this.callParam.isRequesting) return;
      e.preventDefault();
      this.callParam.isPressed = true;
      this.callParam.consecutiveCount = 1;
      this.callParam.currentBatchCount = 0;
      this.startContinuousCount();
    },
    callTouchStart(e) {
      if (this.callParam.isRequesting) return;
      e.preventDefault();
      this.callParam.isPressed = true;
      this.callParam.consecutiveCount = 1;
      this.callParam.currentBatchCount = 0;
      this.startContinuousCount();
    },
    createRing(likeContainer) {
      const ring = document.createElement('div');
      ring.className = 'ring';
      ring.style.animation = 'ringExpand 0.6s ease-out forwards';
      likeContainer.appendChild(ring);
      setTimeout(() => ring.remove(), 600);
    },
        calculateTilt(corners){
            const{x:x1,y:y1}=corners[0];//左上
            const{x:x2,y:y2}=corners[1];// 右上
            // 计算 dy 和 dx
            const dy=y2-y1;
            const dx=x2-x1;
            //计算倾角(弧度->角度)
            const angle =Math.atan2(dy,dx)*(180 /Math.PI);
            // 返回角度
            return angle;
        },
    createPlusOne(likeContainer) {
      const plus = document.createElement('div');
      plus.className = 'plus-one';
      plus.innerHTML = '<span style="color: #ffffff;">+</span><span style="color: #ffffff;">1</span>';
      plus.style.left = '50%';
      plus.style.top = '50%';
      plus.style.animation = 'floatUp 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards';

      likeContainer.appendChild(plus);
      // setTimeout(() => plus.remove(), 1000);
    },
    createParticles(likeContainer) {
      const particleCount = 12;
      const colors = ['#ff5c84', '#ff89a8', '#ffb4b4', '#ffffff'];

      for (let i = 0; i < particleCount; i++) {
        const particle = document.createElement('div');
        particle.className = 'particle';

        const angle = (i / particleCount) * 2 * Math.PI;
        const distance = 60 + Math.random() * 40;
        const tx = Math.cos(angle) * distance;
        const ty = Math.sin(angle) * distance;

        particle.style.setProperty('--tx', `${tx}px`);
        particle.style.setProperty('--ty', `${ty}px`);
        particle.style.animation = 'explode 0.8s ease-out forwards';
        particle.style.background = colors[Math.floor(Math.random() * colors.length)];

        const size = 4 + Math.random() * 6;
        particle.style.width = `${size}px`;
        particle.style.height = `${size}px`;

        likeContainer.appendChild(particle);
        setTimeout(() => particle.remove(), 800);
      }
    },
    praiseDown(e) {
      e.target.style.transform = 'scale(0.9)';
    },
    praiseUp(e) {
      e.target.style.transform = 'scale(1)';
    },
    praiseLeave(e) {
      e.target.style.transform = 'scale(1)';
    },
    handleShowFavBy(_ftype, _favBy, id) {
      let ckPass = this.$bhelper.checkLogin(this);
      if (!ckPass) return;
      this.foldertype = _ftype;
      this.favBy = _favBy;
      this.currentIds = [id];
      this.showFav = true;

      if(_ftype==1){
        this.favId=id;
      }else{
        this.favId='';
      }
    },
    onCommentChang(datas) {
      let total=0;
      datas.map(item=>{
        if(item.commentList&&item.commentList.length>0){
          total+=item.commentList.length;
        }
        total+=1;
      })
      this.isCommentAnima=total>4;
      this.comments = datas;
    },
    handleReplyItem(_type, item) {
      this.replyItem = item;
      $('#new_face_targetinput').focus();
    },
    handleXClear() {
      this.isOcrSearch=false;
      this.keyword = '';
      this.onOcrSearch();
    },
    chooseText(text){
      this.showText=false;
      this.isLoading = true;
      this.keyword=text.text;
      this.imageList=[];
      // setTimeout(()=>{
        this.onOcrSearch({target:document.getElementById('ocr_search')});
      // },600)
    },
    async queryImgs(e) {
      let that = this;

      this.isLoading = true;
      // const loading = this.$loading({
      //     lock: true,
      //     text: '努力加载中...',
      //     spinner: 'el-icon-loading',
      //     background: 'rgba(0, 0, 0, 0.7)'
      // });
      api.searchImgs({ pageSize: 50, article_id: this.id, title: this.keyword ? this.keyword : '', last: this.last }).then((imgres) => {
        // loading.close();
        that.isLoading = false;
        let datas = imgres.data.images.list;
        datas.forEach(item => {
          item.selected = false;

          item.thumbnailBean = {
            id: item.id,
            thumbnail: item.content,
            imageWidth: item.width,
            imageHeight: item.height
          }

          if (item.tags) {
            item.tags = item.tags.split(',');
          } else {
            item.tags = [];
          }
          let _vtime = null;
          if (item.update_time) {
            _vtime = item.update_time;
          } else if (item.create_time) {
            _vtime = item.create_time.replace('T', ' ');
          }
          _vtime = Math.abs(new Date(_vtime).getTime());


          let srcsets = [];
          if (that.info.orientation == '竖屏') {
            item.lazy = {
              src: that.$imgdomainurl + item.id + '-' + _vtime + '@1x560.webp',
              error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
              loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
            }
            srcsets.push(that.$imgdomainurl + item.id + '-' + _vtime + '@1x560.webp 1x');
            srcsets.push(that.$imgdomainurl + item.id + '-' + _vtime + '@2x560.webp 2x');
            srcsets.push(that.$imgdomainurl + item.id + '-' + _vtime + '@3x560.webp 3x');
          } else {
            item.lazy = {
              src: that.$imgdomainurl + item.id + '-' + _vtime + '@1x560.webp',
              error: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png'),
              loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
            }
            srcsets.push(that.$imgdomainurl + item.id + '-' + _vtime + '@1x560.webp 1x');
            srcsets.push(that.$imgdomainurl + item.id + '-' + _vtime + '@2x560.webp 2x');
            srcsets.push(that.$imgdomainurl + item.id + '-' + _vtime + '@3x560.webp 3x');
          }
          item.srcsets = srcsets.join(',');

          item.w = item.thumbnailBean.imageWidth;
          item.h = item.thumbnailBean.imageHeight;
          item.sw = item.w;
          item.sh = item.h;


          item.ratios = [];
          if (item.text) {
              item.text.map(text => {
                  let cor = text.coordinate;

                  let corners=[
                    {x:cor[0][0],y:cor[0][1]},
                    {x:cor[1][0],y:cor[1][1]},
                    {x:cor[2][0],y:cor[2][1]},
                    {x:cor[3][0],y:cor[3][1]}
                  ]
                  let angle=that.calculateTilt(corners);

                  text.width = cor[2][0] - cor[0][0];
                  text.height = cor[2][1] - cor[0][1];

                  text.centerX = cor[0][0];
                  text.centerY = cor[0][1];

                  item.ratios.push({
                    angle:angle,
                    rw:(text.width / item.w) * 100,
                    rleft:(text.centerX / item.w) * 100,
                    rh:(text.height / item.h)* 100,
                    rtop:(text.centerY / item.h) * 100
                  })
              })
          }
        })
        if (datas.length > 0) {
          that.last = datas[datas.length - 1].id;
        }

        if (datas.length < 50)
          that.hasMore = false;
        else
          that.hasMore = true;
        that.imageList = [...that.imageList, ...datas];
        setTimeout(() => {
          that.scrollLoaded = true;
        }, 500)
      }).catch(res => {
        that.isLoading = false;
        // loading.close();
      })
    },
    async onOcrSearch(e) {
      this.isOcrSearch = true;
      this.showText=false;
      this.last = '';
      this.hasMore = true;
      this.imageList = [];
      this.scrollLoaded = false;

      if (this.$route.name == 'game') {
        window.scrollTo(0, $('.imgs-area').offset().top-185)
      } else {
        let sbx = $('#search_bx').offset().top;
        let _top = $('.game-page').scrollTop();
        this.isbg = _top > $('.pro-header').height() + 800 + $('#gameVideo').height() && this.txtCount > 0 && this.txtCount > 0;
        this.showFbar = _top >= 100 + $('#gameVideo').height();
        $('.game-page').animate({  scrollTop: $('.pro-header').height() + 800 + $('#gameVideo').height()+41 }, 0);
      }
      this.queryImgs(e);
    },
    onSearchFocus(e) {
      if(!this.showFbar)
      {
        if (this.$route.name == 'game') {
          this.isToOckBox=true;
          window.scrollTo(0, $('.imgs-area').offset().top-185)
        } else {
          this.isToOckBox=true;
          let _top = $('.game-page').scrollTop();
          this.isbg = _top > $('.pro-header').height() + 800 + $('#gameVideo').height() && this.txtCount > 0 && this.txtCount > 0;
          this.showFbar = _top >= 100 + $('#gameVideo').height();
          $('.game-page').animate({ scrollTop: $('.pro-header').height() + 800 + $('#gameVideo').height()+41 }, 0);
        }
      }
      setTimeout(() => {
        e.target.focus();
      }, 300)
      let that=this;
      setTimeout(()=>{
        that.showText=true;
        that.isFocus = true;
      },that.showFbar?0:1000)
    },
    nearHisAdd() {
      let nearHisResults = localStorage.getItem('NEARBROWSERRESULT')
      if (!nearHisResults) nearHisResults = []
      else {
        nearHisResults = JSON.parse(nearHisResults)
      }
      let that = this
      let has = nearHisResults.filter((r) => {
        return r.id == that.info.id
      })
      if (nearHisResults.length >= 8) nearHisResults = nearHisResults.splice(1, 8)
      if (has.length == 0) {
        nearHisResults.push({ type: 2,pageurl:'/game/'+that.info.id, id: that.info.id, picurl: that.info.image, title: that.info.title })
      }
      localStorage.setItem('NEARBROWSERRESULT', JSON.stringify(nearHisResults))
    },
    docScroll(e) {
      if (this.isFirstScroll) {
        localStorage.setItem('IS-F-SCROLL', false);
        this.isFirstScroll = false;
      }
      $('#ocr_search').blur();
      if (this.$route.name == 'game') {
        // let sbx = $('#search_bx').offset().top;
        this.isgmbg = window.scrollY > $('.pro-header').height() + 800 + $('#gameVideo').height() && this.txtCount > 0;
        this.showFbar = window.scrollY >= 100 + $('#gameVideo').height();
      } else {
        // let sbx = $('#search_bx').offset().top;
        let _top = $('.game-page').scrollTop();
        this.isbg = _top > $('.pro-header').height() + 800 + $('#gameVideo').height() && this.txtCount > 0 && this.txtCount > 0;
        this.showFbar = _top >= 100 + $('#gameVideo').height();
      }
      if (this.model) {
        this.$emit('docScroll', e.target.scrollTop);
      }

      let _scrollTop = this.$route.name == 'game' ? document.documentElement.scrollTop : $('.game-page').prop('scrollTop');

      if(_scrollTop>0){
        if(!this.isScroll)
        {
          $('#app').addClass('is-scroll');
          this.isScroll=true;
        }
      }else{
        if(this.isScroll){
          $('#app').removeClass('is-scroll');
          this.isScroll=false;
        }
      }
      if (this.scrollLoaded == true) {
        if($('#comment_area').length>0)
        {
          if (_scrollTop >= $('#comment_area').offset().top - 2500 && this.hasMore) {
            this.scrollLoaded = false;
            this.queryImgs();
          }
        }
      }

      if (this.$route.name != 'game') {
        let jHeight = $('.game-page').prop('scrollHeight') - $('.game-page').prop('scrollTop') - document.documentElement.clientHeight;
        if (this.$refs['refComment']) {
          if (this.$refs['refComment'].scrollLoaded == false) return

          if(this.last)
        {
          if (jHeight <= 200 && this.$refs['refComment'].hasMore) {
            this.$refs['refComment'].scrollLoaded = false;
            this.$refs['refComment'].loadMore();
          }
        }else{
          if (_scrollTop>50 && this.$refs['refComment'].hasMore) {
            this.$refs['refComment'].scrollLoaded = false;
            this.$refs['refComment'].loadMore();
          }
        }
        }
      }
      else {
        let jHeight = document.documentElement.scrollHeight - document.documentElement.scrollTop - document.documentElement.clientHeight;
        if (this.$refs['refComment']) {
          if (this.$refs['refComment'].scrollLoaded == false) return
          
          if(this.last){
            if (jHeight <= 200 && this.$refs['refComment'].hasMore) {
              this.$refs['refComment'].scrollLoaded = false;
              this.$refs['refComment'].loadMore();
            }
          }else{
            if (_scrollTop>50 && this.$refs['refComment'].hasMore) {
              this.$refs['refComment'].scrollLoaded = false;
              this.$refs['refComment'].loadMore();
            }
          }
        }
      }
      // if(_scrollTop){
      //   this.$refs['refComment'].loadMore();
      // }
    },
    handleShare() {
      let that = this;
      this.$copyText(location.href).then(() => {
        that.$amessage.success('分享链接已拷贝,快去分享~');
      }, () => {
        that.$amessage.error('复制失败！');
      });
    },
    toSearchByImg(item) {
      let that = this;
      //方法二
      let canvas = document.createElement('canvas');
      let img = document.createElement('img');
      // 解决跨域 Canvas 污染问题

      img.setAttribute("crossOrigin", '*');

      // that.isSearching = true;

      // that.isFocus = false;
      img.onload = function (e) {
        canvas.width = img.width;
        canvas.height = img.height;
        let context = canvas.getContext('2d');
        //绘制图片
        context.drawImage(img, 0, 0, img.width, img.height);
        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);

        const base64 = canvas.toDataURL('image/jpeg')
        localStorage.setItem('tmp_im_b64', base64);
        that.isFocus = false;
        if (that.$route.name == 'searchByImageList') {
          that.$router.replace({ path: '/searchByImageList?t=' + Date.parse(new Date()) + '&similar=' + item.id })
        } else {
          //document.body.style.overflow = 'inherit';
          let routeData = that.$router.resolve({ path: '/searchByImageList?t=' + Date.parse(new Date()) + '&similar=' + item.id })
          window.open(routeData.href, '_blank');
        }
        return;
      }
      //将资源链接赋值过去，才能触发img.onload事件
      img.src = this.$imgdomainurl+item.id+'@1x560.webp';
    },
    favByBtn() {
      this.favBy = 'GAME';
      this.favId = this.info.id;
      this.foldertype = 1;
      this.showFav = true;
    },
    async handlePraiseImg(item,e) {
      let ckPass = this.$bhelper.checkLogin(this);
      if (!ckPass) return;
      if (item.praise) {
        let res = await api.delPraise({ type: 4, praiseId: item.id });
        if (res.code == 0) {
          this.$amessage.success('取消喜欢~');
          item.praise_count -= 1;
          item.praise = false;
        }
      } else {
        let res = await api.addPraise({ type: 4, praiseId: item.id });
        if (res.code == 0) {
          this.createHearts(e);
          this.$bhelper.addCirRecord('FAV');
          this.$bhelper.addCirRecord('FAV-IMG');
          this.$store.dispatch('setLeftMenu',[])
          this.$amessage.success('已喜欢，品味不错哦～')
          item.praise_count += 1;
          item.praise = true;
        }
      }
    },
    handleDownloads() {
      let that = this
      let datas = this.imageList.filter((r) => {
        return that.selectIds.includes(r.id)
      })
      let datas2 = this.actImageList.filter((r) => {
        return that.selectIds.includes(r.id)
      })
      this.zip([...datas, ...datas2])
    },
    zip(arr) {
      let that = this;
      this.$amessage.info('下载中,请稍候...')
      var zip = new JSZip()
      let folerName = moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
      // 创建images文件夹
      var imgFolder = zip.folder(folerName)
      let flag = 0 //  判断加载了几张图片的标识

      for (let i = 0; i < arr.length; i++) {
        //遍历数组arr
        this.getBase64(arr[i].url).then((base64) => {
          //调用getBase64()方法,传入图片网络地址得到base64数据
          base64 = base64.split('base64,')[1]
          imgFolder.file(arr[i].url.substring(arr[i].thumbnail.lastIndexOf('/') + 1) + '.png', base64, { base64: true }) //自定义图片名字，存进images文件夹里面
          if (flag === arr.length - 1) {
            zip.generateAsync({ type: 'blob' }).then((blob) => {
              saveAs(blob, folerName + '.zip') //自定义文件压缩包名字
              that.$amessage.success('下载完成')
            })
          }
          flag++
        })
      }
    },
    handleSelectAll() {
      let that = this
      if (that.selectIds.length != that.imageList.length + that.actImageList.length) {
        this.imageList.map((item) => {
          item.selected = true
        })
        this.actImageList.map((item) => {
          item.selected = true
        })
      } else {
        this.imageList.map((item) => {
          item.selected = !that.isCkAll
        })
        this.actImageList.map((item) => {
          item.selected = !that.isCkAll
        })
      }
    },
    handleCancelSelect() {
      this.imageList.map((item) => {
        item.selected = false
      })
      this.actImageList.map((item) => {
        item.selected = false
      })
      this.isCkAll = false
    },
    toCommentArea() {
      $('body,html,.game-page').animate({
        'scrollTop': $('.game-top').height() + $('.center-info').height()
      }, 0);
      setTimeout(() => {
        $('#commentVal').focus();
      }, 100)
    },
    onFavSucc() {
      if (this.favBy == 'IMG') {
        let that = this;
        this.imageList.map(r => {
          if (that.currentIds.includes(r.id)) {
            r.collect=true;
            r.selected = false;
          }
        })
        this.actImageList.map(r => {
          if (that.currentIds.includes(r.id)) {
            r.collect=true;
            r.selected = false;
          }
        })
        this.currentIds = [];
      } else {
        this.info.collectCount++;
      }
      this.showFav = false;
    },
    handleShowInfo(_item, _idx) {
      if (this.selectIds.length > 0) {
        _item.selected = !_item.selected
        return;
      }
      this.curViewidx = _idx;
      this.curImgId = _item.id;
      this.currentImgUrl = _item.url;
      window.history.pushState({}, 0, '/imgv/' + _item.id);
      if (this.$route.name == 'game')
        document.body.style.overflow = 'hidden';
      this.showInfo = true;
    },
    onInfoClose() {
      window.history.pushState({}, 0, this.curFullPath);
      if (this.$route.name == 'game')
        document.body.style.overflow = 'inherit';
      this.showInfo = false;
    },
    async handlePraiseArticle(e) {
      let likeContainer = e.target;
      likeContainer.classList.remove('heart-bounce');
      void likeContainer.offsetWidth;

      let ckPass = this.$bhelper.checkLogin(this);
      if (!ckPass) return;
      if (this.info.praiseCount > 0) {
        let res = await api.delPraise({ type: 0, praiseId: this.id });
        if (res.code == 0) {
          this.info.praiseCount = 0;
          this.info.praise--;
          this.$amessage.success('取消喜欢~')
        }
      } else {
        let res = await api.addPraise({ type: 0, praiseId: this.id });
        if (res.code == 0) {
          this.createHearts(e);

          this.$bhelper.addCirRecord('FAV');
          this.$bhelper.addCirRecord('FAV-GAME');
          this.$store.dispatch('setLeftMenu',[])
          this.createRing(likeContainer);
          this.createParticles(likeContainer);
          this.createPlusOne(likeContainer);
          likeContainer.classList.add('heart-bounce');

          this.info.praise++;
          this.info.praiseCount = 1;
          this.$amessage.success('已喜欢，品味不错哦～')
        }
      }
    },
    getRandomNumber(min, max) {
        return Math.random() * (max - min) + min;
    },
    getParticleCount() {
        const width = window.innerWidth;
        if (width <= 480) return this.fullScPraiseParam.CONFIG.particleCount.mobile;
        if (width <= 768) return this.fullScPraiseParam.CONFIG.particleCount.tablet;
        return this.fullScPraiseParam.CONFIG.particleCount.desktop;
    },
    createHearts(e) {
      let that=this;
      
      const confettiContainer = document.createElement('div');
      confettiContainer.className = 'confetti-container';

      let _parent=document.querySelector('.game-page');
      _parent.appendChild(confettiContainer);

      const now = Date.now();
      if (this.fullScPraiseParam.isAnimating || now - this.fullScPraiseParam.lastTime < this.fullScPraiseParam.CONFIG.cooldown) return;
      
      this.fullScPraiseParam.isAnimating = true;
      this.fullScPraiseParam.lastTime = now;

      // showToast();
      if(e.target){
        const btn =e.target;
        btn.style.animation = 'btn-success 0.5s ease';
        setTimeout(() => btn.style.animation = '', 500);
      }

      const particleCount = this.getParticleCount();
      const viewportWidth = window.innerWidth;
      const spacing = viewportWidth / particleCount;

      const fragment = document.createDocumentFragment();
      let activeParticles = particleCount;

      for(let i = 0; i < particleCount; i++) {
          const heart = document.createElement('div');
          heart.className = 'heart';
          heart.textContent = '❤';
          
          const xPos = i * spacing + this.getRandomNumber(-20, 20);
          heart.style.left = `${xPos}px`;
          
          const duration = this.getRandomNumber(2, 3);
          heart.style.animationDuration = `${duration}s`;

          heart.addEventListener('animationend', () => {
              heart.remove();
              if (--activeParticles === 0) {
                that.fullScPraiseParam.isAnimating = false;
              }
          }, { once: true });

          fragment.appendChild(heart);
      }

      confettiContainer.appendChild(fragment);
    },

    getCllRandomNumber(min, max) {
        return Math.random() * (max - min) + min;
    },
    getRandomFromArray(arr) {
        return arr[Math.floor(Math.random() * arr.length)];
    },
    getCallParticleCount() {
        const width = window.innerWidth;
        if (width <= 480) return this.fullCallParam.CONFIG.particleCount.mobile;
        if (width <= 768) return this.fullCallParam.CONFIG.particleCount.tablet;
        return this.fullCallParam.CONFIG.particleCount.desktop;
    },
    createConfetti(e) {
      const confettiContainer = document.createElement('div');
      confettiContainer.className = 'confetti-container';

      let _parent=document.querySelector('.game-page');
      _parent.appendChild(confettiContainer);

      const now = Date.now();
      if (this.fullCallParam.isAnimating || now - this.fullCallParam.lastTime < this.fullCallParam.CONFIG.cooldown) return;
      
      this.fullCallParam.isAnimating = true;
      this.fullCallParam.lastTime = now;

      // showToast();

      // const btn = e.target;
      // btn.style.animation = 'btn-success 0.5s ease';
      // setTimeout(() => btn.style.animation = '', 500);

      const particleCount = this.getCallParticleCount();
      const viewportWidth = window.innerWidth;
      const spacing = viewportWidth / particleCount;

      const fragment = document.createDocumentFragment();
      let activeParticles = particleCount;

      let that=this;
      for(let i = 0; i < particleCount; i++) {
          const confetti = document.createElement('div');
          const shape = this.getRandomFromArray(this.fullCallParam.CONFIG.shapes);
          confetti.className = `confetti ${shape}`;
          confetti.style.background = this.getRandomFromArray(this.fullCallParam.CONFIG.colors);
          
          const initXPercent = (i * spacing / viewportWidth) * 100;
          const finalOffsetPercent = this.getCllRandomNumber(-5, 5);
          const rotation = this.getCllRandomNumber(180, 360);
          
          confetti.style.setProperty('--init-x', `${initXPercent}vw`);
          confetti.style.setProperty('--final-x', `${initXPercent + finalOffsetPercent}vw`);
          confetti.style.setProperty('--rotation', `${rotation}deg`);

          const scale = this.getCllRandomNumber(0.8, 1.2);
          const duration = this.getCllRandomNumber(1.5, 2.5);
          
          confetti.style.transform = `scale(${scale})`;
          confetti.style.animation = `fall ${duration}s ease-out forwards`;

          confetti.addEventListener('animationend', () => {
              confetti.remove();
              if (--activeParticles === 0) {
                that.fullCallParam.isAnimating = false;
              }
          }, { once: true });

          fragment.appendChild(confetti);
      }

      confettiContainer.appendChild(fragment);
  },
    async handleTopSend() {
      let ckPass = this.$bhelper.checkLogin(this);
      if (!ckPass) return;
      let val = $('#new_face_targetinput').val();
      if (!val) {
        this.$amessage.warn('请输入评论内容~')
        return;
      }
      let params = { commentId: this.id, content: val };
      if (this.replyItem.id) {
        params.parentId = this.replyItem.id;
      }
      let res = await api.addComment(params);
      if (res.code == 0) {
        res.data.member = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
        res.data.content = this.$bhelper.replace_em(res.data.content);
        res.data.showReply = false;
        if (this.replyItem.id) {
          res.data.parentName = this.replyItem.member.userName;
          this.$amessage.success('回复已送达，继续畅聊吧～')
        } else {
          this.$amessage.success('你的神评论已发射！')
        }
        if (this.parentItem) {
          this.parentItem.commentList = [...this.parentItem.commentList, ...[res.data]];
        } else {
          this.comments = [res.data].concat(this.comments);
          this.$refs['refComment'].pushData(res.data);
        }

        // this.comments = [res.data].concat(this.comments);
        $('#new_face_targetinput').val('');
        // this.$refs['refComment'].pushData(res.data);

        this.replyItem = {}
      }
    },
    async handleSend() {
      if (!this.commentVal) return;
      let res = await api.addComment({ commentId: this.id, content: this.commentVal });
      if (res.code == 0) {
        res.data.member = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
        res.data.content = this.$bhelper.replace_em(res.data.content);
        this.comments = [res.data].concat(this.comments);
        // this.comments.push(res.data);
        this.commentVal = '';
      }
    },
    startMarquee() {
      let itemEls = $('#marquee_comments').find('.item');

      let totalH = 0;
      let firstH = itemEls[0].offsetHeight;
      let marqueePx = 0;
      itemEls.each((idx, el) => {
        totalH += el.offsetHeight;
      })
      //鼠标事件绑定
      this.commentTimer = setInterval(function () {
        if (marqueePx >= totalH - 410) {
          $('#marquee_comments').find('.item:lt(9)').insertAfter($('#marquee_comments').find('.item:last'));
          marqueePx = 0;
        }
        $('#cmt_wrap').css('transform', 'translateY(' + (-marqueePx) + 'px)');
        marqueePx += firstH;
      }, 2000);
    },
    async getCallMembers(){
      let that=this;
      let res=await api.getCallPersons(this.id);
      res.data.map(u=>{
        let item=u.member;
        let _vtime=null;
        if(item.updateTime){
            _vtime=item.updateTime;
        }else if(item.createTime){
            _vtime=item.createTime;
        }else if(item.create_time){
            _vtime=item.create_time.replace('T',' ');
        }
        _vtime=Math.abs(new Date(_vtime).getTime());
        u.lazy = {
            // src:that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@1x60.webp',
            src:item.avatar,
            error: require('@/assets/pro/default_sys_img.svg'),
            loading: require('@/assets/l_error_'+(localStorage.getItem('THM-STY')?localStorage.getItem('THM-STY'):'light')+'.png')
        }
        let srcsets=[];
        srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@1x60.webp 1x');
        srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@2x60.webp 2x');
        srcsets.push(that.$imgdomainurl+'avatar-'+item.id+'-'+_vtime+'@3x60.webp 3x');
        u.srcsets=srcsets.join(',');

        u.oldcontent=u.content;
        u.content=that.$bhelper.replace_em(u.content);
      })
      this.callMembers=res.data;
      this.topCallMembers=Object.assign([],res.data).reverse();
      this.callMemberTotal=res.total;
    },
    async queryInfo() {
      let that = this;
      if (localStorage.getItem('token')) {
        this.commentParams.currentUserId = localStorage.getItem('userId');
        this.currentUser = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
      }
      this.commentParams.commentId = this.id;
      let res = await api.getArticleById(this.id);

      if(res.data){
        if (res.data.categoryTopId != 22) {
        if (res.data.categoryTopId == 1) {
          this.$amessage.warn('访问错误,3秒后即将跳转至作品详情')
          setTimeout(function () {
            that.$router.replace({ path: '/work/' + res.data.id })
          }, 3000)
        } else if (res.data.categoryTopId == 9) {
          this.$amessage.warn('访问错误,3秒后即将跳转至文章详情')
          setTimeout(function () {
            that.$router.replace({ path: '/article/' + res.data.id })
          }, 3000)
        }
        return;
      }

      document.title=res.data.title+'-GameUI.net'
      if (res.data.videoUrl) {
        let urls = res.data.videoUrl.split(',');
        res.data.videoUrl = [];
        urls.forEach(url => {
          if (url.indexOf('v.qq.com') > -1) {
            let _vId = url.substring(url.lastIndexOf('/') + 1).replace('.html', '');
            // res.data.videoUrl.push({type:'txv',url:'https://v.qq.com/txp/iframe/player.html?vid='+_vId})
            res.data.videoUrl.push({ type: 'txv', oldUrl: url, url: url + '&autoplay=0' })
          } else if (url.indexOf('bilibili.com') > -1) {
            let vals=[];
            let id='';
            if(url.indexOf('bvid=')>-1){
              // vals=url.substring(url.lastIndexOf('/')+1).split('?');
              vals=url.split('=');
              id=vals[1];
            }else if(url.indexOf('?')>-1){
              vals=url.substring(url.lastIndexOf('/')+1).split('?');
              id=vals[0];
            }
            // res.data.videoUrl.push({type:'bilibili',url:'https://player.bilibili.com/player.html?bvid='+_bId})
            res.data.videoUrl.push({ type: 'bilibili',vid:id,oldUrl: url+ '&autoplay=0', url: url + '&autoplay=0' })
          } else if (url.indexOf('youku.com') > -1) {
            let _embedVal = url.substring(url.lastIndexOf('_') + 1);
            _embedVal = _embedVal.substring(0, _embedVal.indexOf('.html'));
            // res.data.videoUrl.push({type:'youku',url:'https://player.youku.com/embed/'+_embedVal})
            res.data.videoUrl.push({ type: 'youku', oldUrl: url, url: url + '&autoplay=0' })
          } else {
            res.data.videoUrl.push({ type: 'sys', url: url })
          }
        })
      }
      if(res.data.commentCallNum==null){
        res.data.commentCallNum=0;
      }
      this.callParam.totalCount=res.data.commentCallNum;
      // {{ info.device }} · {{ info.categoryName }} · {{ info.style }} · {{ info.era }}
      let html=[];
      if(res.data.device){
        html.push('<a target="_blank" href="/games?dev='+res.data.device+'">'+res.data.device+'</a>')
      }
      if(res.data.categoryName){
        html.push('<a target="_blank" href="/games?cat='+res.data.categoryId+'">'+res.data.categoryName+'</a>')
      }
      if(res.data.style){
        html.push('<a target="_blank" href="/games?style='+res.data.style+'">'+res.data.style+'</a>')
      }
      if(res.data.era){
        html.push('<a target="_blank" href="/games?era='+res.data.era+'">'+res.data.era+'</a>')
      }
      res.data.cate_desc_html=html.join(' · ');
      this.info = res.data;
      that.nearHisAdd();
      }

      this.getCallMembers();

      try {
        res = await api.getTextCountAndTexts(this.id);
        if(res.data.games&&res.data.games.list&&res.data.games.list.length>0)
        {
          let item=res.data.games.list[0];
          this.txtCount = item.text_count;
          let _texts=[];
          item.text_list.map(text=>{
            _texts=[..._texts,...[{text:text}]];
          })
          this.oldTexts=_texts;
          this.texts=_texts;
          let totalPage = item.text_count % 54 == 0 ? item.text_count / 54 : parseInt(item.text_count /54) + 1;
          this.textTotalPage=totalPage;
          this.showTexts=this.paginateArray(_texts,54,this.textPageIdx);
          this.scrollLoaded=true;
        }
      } catch (error) {
        
      }
      
      res = await api.queryImgEmojCount(this.id);
      let _em1 = res.data.filter(r => { return r.title == '[em_21]' });
      let _em2 = res.data.filter(r => { return r.title == '[em_16]' });
      let _em3 = res.data.filter(r => { return r.title == '[em_2]' });
      let _em4 = res.data.filter(r => { return r.title == '[em_14]' });
      let _em5 = res.data.filter(r => { return r.title == '[em_18]' });
      let obj = { em1: { num: 0, praiseCount: 0 }, em2: { num: 0, praiseCount: 0 }, em3: { num: 0, praiseCount: 0 }, em4: { num: 0, praiseCount: 0 }, em5: { num: 0, praiseCount: 0 } };
      if (_em1) {
        obj.em1 = _em1[0];
      }
      if (_em2) {
        obj.em2 = _em2[0];
      }
      if (_em3) {
        obj.em3 = _em3[0];
      }
      if (_em4) {
        obj.em4 = _em4[0];
      }
      if (_em5) {
        obj.em5 = _em5[0];
      }
      this.emdata = obj;

      if (localStorage.getItem('token')) {
        this.$bhelper.add(this.info, 'game');
        this.$bhelper.addCirRecord('BROWSE');

        this.$store.dispatch('setLeftMenu',[])
      }

      res = await api.getLastPraiseList({ praiseId: this.id, pageNum: 1, pageSize: 10, orderByColumn: 'createTime', isAsc: 'desc' });
      this.lastPraiseList = res.data;

      if (this.info.topCategory) {
        res = await api.getRecommends({ id: this.id, pageNum: 1, pageSize: 10, categoryId: this.info.topCategory.id });
        this.recommends = res.data;
      }

      // this.queryComments();

      this.queryImgs();
      that.$nextTick(() => {
        if (that.$refs.refGameTag) {
          that.$refs.refGameTag.init();
        }
        if (that.$refs.refGameVideo) {
          that.$refs.refGameVideo.init();
        }
      })
    },
    async queryComments() {
      let that = this;
      let res = await api.getComments(this.commentParams);
      let list = res.data;
      this.commentTotal = res.total;
      list.forEach((l) => {
        l.content = l.content.indexOf('http://') > -1 ? l.content : that.$bhelper.replace_em(l.content);
        l.showSubMore = false;
        l.showReply = false;
        l.replayModel = {
          content: ''
        };
        if (l.commentList && l.commentList.length > 0) {
          l.commentList.forEach(s => {
            s.content = s.content.indexOf('http://') > -1 ? s.content : that.$bhelper.replace_em(s.content);
            s.showReply = false;
            s.replayModel = {
              content: ''
            };
          })
        }
      })
      this.comments = list;

      this.$nextTick(() => {
        if (list.length > 4) {
          if (that.commentTimer)
            clearInterval(that.commentTimer);
          that.startCommentMarquee();
          $('#marquee_comments').hover(function () {
            if (that.commentTimer)
              clearInterval(that.commentTimer);
          }, function () {
            that.startCommentMarquee();
          })
        }
      })
    },
    startCommentMarquee() {
      let that = this;
      //参数初始化
      var opt = { timer: 2000, speed: 500, line: 1 };
      var _this = $('#marquee_comments_dv').find('ul:first');
      var lineH = _this.find("li:first").height(), //获取行高
        line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度
        speed = opt.speed ? parseInt(opt.speed, 10) : 500, //卷动速度，数值越大，速度越慢（毫秒）
        timer = opt.timer ? parseInt(opt.timer, 10) : 3000; //滚动的时间间隔（毫秒）
      if (line == 0) line = 1;
      var upHeight = 0 - line * lineH;
      //滚动函数
      //鼠标事件绑定
      that.commentTimer = setInterval(function () {
        _this.find("li:first").fadeOut(500, function () {
          _this.find("li:first").appendTo(_this).hide().fadeIn(500);
        })
      }, timer);
    },
    onImgError(e) {
      e.target.src = require('../../assets/pro/default_uimg.svg');
    },
    async handleFollow() {
      let ckPass = this.$bhelper.checkLogin(this);
      if (!ckPass) return;
      if (this.info.isSubscribe > 0) {
        let res = await api.cancelFollowTo(this.info.member.id);
        if (res.code == 0) {
          this.info.isSubscribe = 0;
          this.$amessage.success('已取消，有缘再见～')
        }
      }
      else {
        let res = await api.followTo(this.info.member.id);
        if (res.code == 0) {
          this.$bhelper.addCirRecord('FOLLOW');
          this.$store.dispatch('setLeftMenu',[])
          this.info.isSubscribe = 1;
          this.$amessage.success('关注+1，灵感不断！')
        }
      }
    },
    handleTop() {
      if ($('.game-info').length > 0) {
        $('.game-page').animate(
          {
            scrollTop: 0,
          },
          100
        )
      } else {
        $('html').animate(
          {
            scrollTop: 0,
          },
          100
        )
      }
    },
    version(time) {
      let date = new Date(time)
      return date.getTime()
    },
    get_avatar_url(member = { id: '', avatar: '' }, n = 1, w = 30) {
      if (!member.id || !member.avatar) return this.defaultAvatar
      let hash = SparkMD5.hash(member.avatar).slice(0, 6)
      return `https://img.gameui.net/avatar-${member.id}-${hash}@${n}x${w}.webp`
    },
    get_avatar_urls(member = { id: '', avatar: '' }, w = 30) {
      return `${this.get_avatar_url(member, 1, w)} 1x, ${this.get_avatar_url(member, 2, w)} 2x, ${this.get_avatar_url(member, 3, w)} 3x`
    },
    handleClose() {
      this.$emit('close')
    },
    handleTagPrev() {
      this.gmTagSwiper.slidePrev()
    },
    handleTagNext() {
      this.gmTagSwiper.slideNext()
    },
    handledxVdSwiperPrev() {
      this.gmVideoSwiper.slidePrev();
    },
    handledxVdSwiperNext() {
      this.gmVideoSwiper.slideNext();
    }
  },
  computed: {
    selectIds() {
      let datas = this.imageList.filter((r) => {
        return r.selected
      })
      let datas2 = this.actImageList.filter((r) => {
        return r.selected
      })
      let ids = datas.map((item) => {
        return item.id
      })
      let ids2 = datas2.map((item) => {
        return item.id
      })
      let newids = [...ids, ...ids2];
      this.currentIds = newids;
      this.isCkAll = newids.length == this.actImageList.length + this.imageList.length;
      return ids
    }
  },
  watch: {
    keyword(newVal){
      this.textPageIdx=1;
      if(newVal){
        let finds=this.oldTexts.filter(r=>{
          return r.text.indexOf(newVal)>-1;
        })
        this.texts=finds;
        this.showTexts=this.paginateArray(this.texts,54,this.textPageIdx);
      }else{
        this.texts=this.oldTexts;
        this.showTexts=this.paginateArray(this.texts,54,this.textPageIdx);
      }
    },
    id(newVal) {
      this.id = newVal;
      this.queryInfo();
    }
  },
  destroyed() {
    let that = this;
    if (that.commentTimer) {
      clearInterval(that.commentTimer);
      $('#marquee_comments').unbind('hover');
    }

    if (this.$route.name == 'game' || this.curFullPath.indexOf('/game/') > -1) {
      window.removeEventListener('scroll', this.docScroll)
    }

    window.removeEventListener('mouseup', this.stopCounting);
    window.removeEventListener('mouseleave', this.stopCounting);
    window.removeEventListener('touchend', this.stopCounting);
    window.removeEventListener('touchcancel', this.stopCounting);
  },
  async mounted() {
    $('body,html,.game-page').animate({
        'scrollTop':0
      }, 0);
    $('.bodyView').addClass('info-detail-page is-game is-gm-dt');
    if (!localStorage.getItem('IS-F-SCROLL')) {
      this.isFirstScroll = true;
    }
    this.isSelfPage = this.$route.name == 'game';
    let token = window.localStorage.getItem('token')
    if (token) {
      this.currentUser = JSON.parse(decodeURIComponent(localStorage.getItem('BSIC')));
    }
    this.curFullPath = location.pathname;
    if (this.$route.name == 'game' || this.curFullPath.indexOf('/game/') > -1) {

      window.addEventListener('scroll', this.docScroll)
    }
    if(this.isSelfPage){
      $('.pro-page-bar').remove();
    }

    window.addEventListener('mouseup', this.stopCounting);
    window.addEventListener('mouseleave', this.stopCounting);
    window.addEventListener('touchend', this.stopCounting);
    window.addEventListener('touchcancel', this.stopCounting);

    let that=this;
    $(document.body).keyup(function (e) {
        if(e.key==='l'&&that.txtCount>0){
            that.onSearchFocus({target:document.querySelector('#ocr_search')});
        }
    })

    if (this.id) {
      this.queryInfo();
    }
  }
}
</script>


<style scoped lang="less">
.game-page {
  .game-top {
    .g-basic{
      display: flex;
      justify-content: space-between;
      position: absolute;
      left:0px;
      right:0px;
      top:0px;
      bottom:0px;
      
      padding:130px 40px 0px 38px;

      .basic{
        display: flex;
        .basic-cover{
          min-width:341px;
          width:341px;height:248px;
          border-radius:8px;
          overflow:hidden;
          position: relative;
          .cover{
            width:100%;height:100%;
            object-fit: cover;
          }
          .pro-title-tag{
            position: absolute;
            right:16px;
          }
        }
        .basic-game-info{
          margin-left:30px;
          width:100%;
          .time{
            color:#52565A;
          }
          .cate-desc{
            color:#52565A;
          }
          .g-title{
            display: flex;
            align-items: center;
            width:100%;
            .tit{
              font-size:44px;
              line-height:62px;
              // margin-bottom:14px;
              font-weight:500;
              white-space: nowrap;
              max-width:90%;
              overflow: hidden;
              text-overflow: ellipsis;
            }
          }
        }
        .user{
          margin-top:21px;
        }
      }
    }
    &.is-gm-self-pg {
      &:after {
        // background: radial-gradient(54% 69% at 54% 9%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #1D1C1B 100%);
        // background: radial-gradient( 71% 69% at 54% 9%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, #1D1C1B 100%);
        // background: radial-gradient( 70% 68% at 54% 9%, rgba(0,0,0,0) 0%, rgba(255,255,255,0) 6%, rgba(255,255,255,0.8) 100%);
      }
    }
  }

  .info-right-bar {
    .icon-container {
      // position: relative;
      // width: 60px;
      // height: 60px;
      // border-radius: 50%;
      // background: linear-gradient(45deg, #FF6B9C, #FF9D71);
      // cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      // box-shadow: 0 4px 15px rgba(255, 107, 156, 0.3);
      transition: transform 0.2s ease;
    }

    .icon-container:active {
      transform: scale(0.95);
    }

    .icon-text {
      color: white;
      font-size: 14px;
      font-weight: bold;
      position: absolute;
      bottom: -25px;
      width: 100%;
      text-align: center;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    // .total-count {
    //   position: absolute;
    //   top: -8px;
    //   right: -8px;
    //   background: #ff4081;
    //   color: white;
    //   font-size: 12px;
    //   padding: 2px 6px;
    //   border-radius: 10px;
    //   min-width: 16px;
    //   text-align: center;
    //   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    //   font-family: Arial, sans-serif;
    // }

    .ring {
      position: absolute;
      border: 2px solid #ff6b9c;
      border-radius: 50%;
      width: 100%;
      height: 100%;
      opacity: 0;
      transform: scale(1);
    }

    .icon-container.loading {
      opacity: 0.7;
      pointer-events: none;
    }

    .loading-indicator {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 20px;
      height: 20px;
      border: 2px solid #ffffff;
      border-radius: 50%;
      border-top-color: transparent;
      animation: spin 1s linear infinite;
      display: none;
    }

    .icon-container.loading .loading-indicator {
      display: block;
    }

    @keyframes spin {
      to {
        transform: translate(-50%, -50%) rotate(360deg);
      }
    }

    @keyframes floatUp {
      0% {
        transform: translate(-50%, 0) scale(0.8);
        opacity: 0;
      }

      20% {
        transform: translate(-50%, -20px) scale(1.2);
        opacity: 1;
      }

      60% {
        transform: translate(-50%, -40px) scale(1);
        opacity: 1;
      }

      100% {
        transform: translate(-50%, -60px) scale(0.8);
        opacity: 0;
      }
    }

    @keyframes explode {
      0% {
        transform: translate(0, 0) scale(1);
        opacity: 1;
      }

      100% {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
      }
    }

    @keyframes ringExpand {
      0% {
        transform: scale(1);
        opacity: 0.8;
      }

      100% {
        transform: scale(2.5);
        opacity: 0;
      }
    }

    .vibrate {
      animation: vibrate 0.1s linear;
    }

    @keyframes vibrate {

      0%,
      100% {
        transform: translate(0);
      }

      25% {
        transform: translate(-1px, -1px);
      }

      50% {
        transform: translate(1px, 1px);
      }

      75% {
        transform: translate(-1px, 1px);
      }
    }
  }

  .dxvd-page-prev {
    background: url('../../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
    background-size: 50px 50px;
    background-position: center;
    width: 80px;
    height: 80px;
    transform: rotate(180deg);
    z-index: 1;
    left: 30px !important;
    top: 140px;
    border-radius: 8px;
    transition: .2s all linear;
    opacity: .9;

    &:after {
      display: none;
    }

    &:hover {
      opacity: 1;
    }
  }

  .dxvd-page-next {
    background: url('../../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
    background-size: 50px 50px;
    background-position: center;
    width: 80px;
    height: 80px;
    z-index: 1;
    border-radius: 8px;
    right: 30px;
    top: 140px;

    transition: .2s all linear;
    opacity: .9;

    &:after {
      display: none;
    }

    &:hover {
      opacity: 1;
      // background: url('../../assets/pro/gmcate-page-prev-msize.svg') no-repeat;
      // background-size: cover;
      // opacity:.6 !important;
    }
  }

  .game-top {
    height:440px;
    // height:782px;
    position: relative;
    z-index:12;
    &:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 0;
      // background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #000000 100%);
      // background: radial-gradient(54% 69% at 54% 9%, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 10%, #1D1C1B 100%);
      // background: radial-gradient( 71% 69% at 54% 9%, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 10%, #1D1C1B 100%);
    }

    .top-bg {
      height: 100%;
      width: 100%;
    }

    .basic {
      // position: absolute;
      // margin: 0px 176px;
      width:100%;
      // padding: 0px 176px;
      z-index: 1;
      left: 0px;
      right: 0px;
      top: 0px;
      // padding-top: 88px;
      height: 100%;
      // padding-bottom:37px;
      overflow: hidden;

      .g-title {
        // max-width: calc(100% - 342px - 177px);
        font-size: 55px;
        color: #fff;
        line-height: 77px;
        // text-shadow: 0px 2px 6px rgba(0, 0, 0, 0.76);
        margin-bottom: 14px;
        margin-top:12px;
      }

      .company {
        // width: 208px;
        font-size: 16px;
        color: #EAEAEA;
        line-height: 22px;
        margin: 0px 0px 18px 0px;
      }

      .plateform {
        width: 80px;
        font-size: 16px;
        color: #EAEAEA;
        line-height: 22px;
      }

      .user {
        display: flex;
        align-items: center;
        margin-top:17px;
        margin-bottom:21px;

        .img-box {
          width: 40px;
          height: 40px;
          border-radius: 40px;
          overflow: hidden;
          margin-right: 17px;
          &:hover{
            img{
              transform: scale(1.08);
            }
          }
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }
        .uname{
          &:hover{
            color:#11CCB1;
            transition:.2s all linear;
            text-decoration:underline;
          }
        }

        .follow {
          padding:0px 11px;
          line-height: 22px;
          height:22px;
          border-radius: 4px;
          border: 1px solid #484848;
          text-align: center;
          font-size:12px;
          margin-left: 15px;
          background: #171717;
          transition: .1s all linear;

          &:hover {
            opacity: .8;
          }
        }
      }

      @keyframes shine {
        0% {
          left: -100px;
        }

        20% {
          left: 350px;
        }

        100% {
          left: 350px;
        }
      }

      .fav-row {
        display: flex;
        align-items: center;

        .fav-to-folder {
          width: 282px;
          line-height: 50px;
          background: #11CCB1;
          border-radius: 25px;
          display: inline-block;
          text-align: center;
          background-image: url('../../assets/pro/gm_infostar_icon.svg');
          background-repeat: no-repeat;
          background-position: 68px center;
          font-size: 16px;
          user-select: none;
          color: #fff;
          transition: .1s all linear;
          padding-left: 10px;
          position: relative;
          overflow: hidden;

          // &:not(.active):before {
          //   content: '';
          //   position: absolute;
          //   width: 50px;
          //   height: 100%;
          //   background: linear-gradient(90deg,
          //       transparent,
          //       rgba(255, 255, 255, 0.3),
          //       transparent);
          //   transform: skewX(-20deg);
          //   top: 0;
          //   left: -100px;
          //   animation: shine 6s infinite;
          // }

          &.active {
            background: #252730;
          }

          &:not(.active):hover {
            background-color: #0fab94;
          }
        }

        .zan {
          background: url('../../assets/pro/game/top_zan.svg') no-repeat;
          width: 50px;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          margin-left: 20px;
          position: relative;
          transition: .2s all linear;

          &:hover {
            background: url('../../assets/pro/game/top_zan_hover.svg') no-repeat;

            .sm-tip {
              left: 8px;
            }

            .num {
              background: #555866;
            }
          }

          .num {
            background: #38393B;
            color: #fff;
            line-height: 18px;
            border-radius: 18px;
            position: absolute;
            padding: 0px 4px;
            min-width: 18px;
            text-align: center;
            right: -10px;
            font-style: normal;
            font-size: 12px;
            top: 0px;
          }

          &.active {
            background: url('../../assets/pro/game/top_zan_active.svg') no-repeat;

            .num {
              background: #11CCB1;
            }
          }
        }
      }

      .sub-desc {
        font-size: 14px;
        color: #EAEAEA;
        margin: 20px 0px 40px 0px;
      }

      .gm-tag-box {
        max-width:500px;
        position: relative;
      }

      .game-tags {
        li {
          line-height: 38px;
          width: max-content !important;
          margin-right: 15px;
          border-radius: 38px;
          overflow: hidden;

          a {
            background-color: rgba(66, 64, 74, 0.8);
            color: #fff;
            padding: 0px 30px 0px 22px;
            display: inline-block;
            height: 100%;
            user-select: none;
            width: 100%;
            background-image: url('../../assets/pro/tag_arrow.svg');
            background-repeat: no-repeat;
            background-position: 85% center;
            background-size: 6px 10px;

            &.active {
              background-color: #42404A;
            }

            &:hover {
              background-color: #42404A;
            }
          }
        }
      }

      .game-desc-tit {
        font-size: 20px;
        color: #EAEAEA;
        margin-bottom: 20px;
      }
    }
  }

  

  .game-desc {
    max-width:734px;
    font-size: 16px;
    // padding: 16px;
    padding-left: 0px;
    padding-right: 16px;
    font-weight: 400;
    color: #EAEAEA;
    line-height: 34px;
    margin-top: 20px;
    max-height:102px;
    overflow-y: auto;
    margin:26px auto 10px auto;
    // &::-webkit-scrollbar {
    //   width: 4px;
    //   height: 8px;
    //   background-color: transparent;
    // }

    // /*滚动条的轨道*/
    // &::-webkit-scrollbar-track {
    //   background-color: transparent;
    // }

    // /*滚动条的滑块按钮*/
    // &::-webkit-scrollbar-thumb {
    //   border-radius: 2px;
    //   background-color: #202020;
    // }

    // /*滚动条的上下两端的按钮*/
    // &::-webkit-scrollbar-button {
    //   height: 0;
    // }

    // /* 两个滚动条的交汇处 */
    // &::-webkit-scrollbar-corner {
    //   background-color: transparent;
    // }
  }

  .center-info {
    padding-bottom: 20px;
    margin-top:20px;
    .dx-video-datas {
      margin-top: 10px;

      .dx-vd-item {
        width: 576px !important;
        height: 324px;
        min-width: 576px;
        border-radius: 16px;
        overflow: hidden;
        margin-right: 20px;
        position: relative;
        animation: opacity .2s ease-in;
        border: 2px solid #515151;

        a {
          display: inline-block;
          width: 100%;
          height: 100%;

          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }

          video {
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
        }

        .play-icon {
          background: url('../../assets/pro/v_play_big.svg') no-repeat;
          background-position: center center;
          background-size: 120px 120px;
          display: inline-block;
          left: 0px;
          top: 0px;
          right: 0px;
          bottom: 0px;
          // width: 120px;
          // height: 120px;
          position: absolute;
          // left: calc((100% - 120px) / 2);
          // top: calc((100% - 120px) / 2);
          z-index: 1;
        }
      }
    }

    .mx-1566 {
      max-width: 80%;
      margin: 0 auto;
    }

    .tabs {
      margin-top: 70px;
      margin-bottom: 42px;
      display: flex;
      align-items: center;
      justify-content: center;

      span {
        color: #969696;
        font-size: 24px;
        margin-right: 40px;
        cursor: pointer;
        user-select: none;

        &.active {
          color: #fff;
          font-weight: 500;
          position: relative;
          font-size: 26px;

          &:after {
            content: '';
            height: 1px;
            background: #fff;
            left: calc((100% - 24px) / 2);
            bottom: -5px;
            position: absolute;
            width: 24px;
          }
        }

        &:hover {
          color: #fff;
          font-weight: 500;
          position: relative;

          &:after {
            content: '';
            height: 1px;
            background: #fff;
            left: calc((100% - 24px) / 2);
            bottom: -5px;
            position: absolute;
            width: 24px;
          }
        }
      }
    }

    .search-bx {
      top: 0px;
      width: 100%;
      transition:.2s all linear;
      position: relative;
      // padding-bottom: 10px;
      // padding-top: 10px;
      // padding-left: 10px;
      // padding-right: 10px;
      // margin-bottom: 30px;
      z-index: 11;
      &.is-stick {
        position: sticky;
        
        &:after{
          content:'';
          position: absolute;
          left:-1px;
          right:0px;
          top:0px;
          height:75px;
          bottom:0px;
          background:#111;
        }
      }
      &.show-text-search{
        form{
          // position: absolute;
          // z-index:11;
          // width:100%;
        }
      }

      .disabled-input {
        opacity: .5;
        background-color: #080808;
        /deep/ span:first-child{
            width:100%;
          }
        input {
          background: #080808;
          cursor: not-allowed;
        }
      }

      // transition:.2s all linear;
      // animation:opacity .2s ease-in;
      &.is-bg {
        background: #000;
        padding-top: 17px;
        padding-bottom: 16px;
        .img-texts{
          top:72px;
        }
      }

      &.is-game-bg {
        background: #111;
        // padding-top: 17px;
        // padding-bottom: 16px;
        // top: 84px;
      }

      // max-width:892px;
      .cancel-search {
        background: url('../../assets/pro/cancel_search.svg');
        width: 20px;
        height: 20px;
        position: absolute;
        top: 12px;
        right: 70px;
      }

      &.no-self-searhbx{
        &:after{
          background:#000;
        }
      }

        
      // &:before{
      //   content:'';
      //   position: absolute;
      //   left:0px;
      //   right:0px;
      //   top:0px;
      //   bottom:0px;
      //   background:#111;
      // }

      form {
        border: 1px solid transparent;
        transition: .1s all linear;
        z-index:1;
        &.active {
          border-color:#11CCB1;
          &:after{
            // content:'';
            // position:fixed;
            // left:0px;
            // right:0px;
            // bottom:0px;
            // top:0px;
            // background:#000;
          }
        }

        display: flex;
        align-items: center;
        overflow: hidden;
        height: 47px;
        background-image: url('../../assets/pro/header/search_icon.svg');
        background-repeat: no-repeat;
        background-position: 13px center;

        border-radius: 47px;
        background-color: #242327;
        padding-left: 33px;
        position: relative;

        .cancel-search {
          right: 40px !important;
        }

        input {
          height: 47px;
          background-color: #242327;
          // color:#848393;
          border: none;
          padding-left: 15px;
          color: #fff;
          width: 100%;
          font-size: 14px;
        }
      }
    }

    .panel-tit {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      margin-top:30px;

      // border:1px solid red;
      .text {
        font-size: 26px;
        font-weight: 500;
        line-height: 37px;
      }

      .other-ops {
        font-size: 12px;
        color: #6E6D7A;
        line-height: 26px;
        display: flex;

        .jubao-btn {
          background: url('../../assets/pro/workinfo/gray_report_icon.svg') no-repeat;
          background-position: left center;
          background-size: 18px 18px;
          padding-left: 23px;
        }

        .share-btn {
          border: 1px solid #323232;
          border-radius: 6px;
          width: 70px;
          text-align: center;
          margin: 0px 20px;
          background: url('../../assets/pro/workinfo/gray_share_icon.svg') no-repeat;
          background-position: 10px center;
          background-size: 18px 18px;
          padding-left: 23px;
        }

        .fav-btn {
          border: 1px solid #323232;
          border-radius: 6px;
          width: 70px;
          text-align: center;
          background: url('../../assets/pro/workinfo/gray_star_icon.svg') no-repeat;
          background-position: 10px center;
          background-size: 18px 18px;
          padding-left: 23px;
        }
      }
    }

    .gm-imgs {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 70px;
      grid-gap: 20px;

      .img-item {
        width: calc((100% - 80px) / 5);
        border-radius: 16px;
        overflow: hidden;
        display: flex;
        align-items: center;
        position: relative;
        border: 2px solid transparent;

        .hid-el {
          opacity: 0;
          // display: none;
          // visibility: hidden;
          transition: .2s all linear;
        }

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        &:hover {
          border-color:#11CCB1;

          img {
            transform: scale(1.08);
          }

          .hid-el {
            opacity: 1;
            // display: inherit;
            // visibility: visible;
          }
        }

        &.active {
          .select-btn {
            opacity: 1;
          }
        }

        &.act-bodr {
          border: 2px solid #11CCB1;
        }

        .xs-img-btn {
          background-image: url('../../assets/pro/xs_img_cion.svg');
          background-repeat: no-repeat;
          background-position: center center;
          width: 34px;
          height: 34px;
          position: absolute;
          right: 10px;
          bottom: 11px;
          background-color: #fff;
          border-radius: 12px;
          cursor: pointer;

          &:hover {
            opacity: .9;
          }
        }
      }
    }

    .zan-row {
      text-align: center;
      margin-top: 119px;

      .zan-btn {
        width: 100px;
        height: 100px;
        border-radius: 100px;
        background-color: #181717;
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 0 auto;
        background-image: url('../../assets/pro/size_big_zan.svg');
        background-position: 50% 40%;
        background-size: 40px 40px;
        background-repeat: no-repeat;
        position: relative;
        overflow: hidden;

        &:hover {
          background-color: #42404A;
        }

        i {
          font-style: normal;
          font-size: 14px;
          margin-top: 65px;
          display: inline-block;
          color: #fff;
        }

        &.active {
          // background-color:#42404A;
          background-image: url('../../assets/pro/game/bot_zan_active.svg');
          background-position: 50% 40%;
          background-repeat: no-repeat;
        }
      }
    }

    .new-zans {
      text-align: center;
      margin: 42px 0px 25px 0px;

      .text {
        position: relative;
        color: #BBBBBB;

        &:before {
          content: '';
          height: 1px;
          width: 118px;
          background: #343434;
          position: absolute;
          left: -128px;
          top: 8px;
        }

        &:after {
          content: '';
          height: 1px;
          width: 118px;
          background: #343434;
          position: absolute;
          right: -128px;
          top: 8px;
        }
      }
    }

    .new-zan-uimgs {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 30px;

      .item {
        width: 40px;
        height: 40px;
        border-radius: 40px;
        overflow: hidden;
        margin-right: 20px;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }
    }

    .xg-games {
      display: flex;
      flex-wrap: wrap;
      grid-gap: 20px;

      .bdl-data-item {
        width: calc((100% - 80px) / 5);
        // height: 223px;
        border-radius: 16px;
        overflow: hidden;
        // margin-right: 20px;
        // margin-bottom: 20px;
        position: relative;
        color: #fff;
        border:2px solid transparent;

        // &:nth-child(5n) {
        //   margin-right: 0px;
        // }

        .left-icos {
          position: absolute;
          left: 10px;
          top: 10px;
          display: flex;
          align-items: center;

          img {
            &:first-child {
              margin-right: 10px;
            }
          }
        }

        .right-icos {
          position: absolute;
          right: 10px;
          top: 10px;
          display: flex;
          align-items: center;

          img {
            &:first-child {
              // margin-right:10px;
            }
          }
        }

        >img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .basic-u-info {
          position: absolute;
          bottom: 11px;
          left: 13px;
          display: flex;
          align-items: center;
          right: 12px;
          justify-content: space-between;
          z-index: 1;

          .user {
            display: flex;
            align-items: center;

            img {
              height: 26px;
              width: 26px;
              border-radius: 26px;
              object-fit: cover;
              margin-right: 9px;
            }

            .name {
              color: #fff;
              font-size: 14px;
              font-weight: 500;
            }
          }

          .znum {
            font-size: 12px;
            background: url('../../assets/pro/dianzanicon.svg') no-repeat;
            padding-left: 26px;
            color: #fff;
          }

          .snum {
            font-size: 12px;
            background: url('../../assets/pro/yuedu_icon.svg') no-repeat;
            padding-left: 26px;
            color: #fff;
          }
        }

        .basic-info {
          position: absolute;
          bottom: 10px;
          left: 10px;
          z-index: 1;

          .title {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 3px;
          }

          .bot-desc {
            font-size: 12px;
            color: #fff;
            display: flex;

            .uname {
              margin-left: 32px;
            }
          }
        }

        .con-mask {
          height: 129px;
          position: absolute;
          bottom: 0px;
          left: 0px;
          right: 0px;
          background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
        }

        .hid-el {
          // display: none;
          opacity: 0;
        }

        &:hover {
          border: 2px solid #11CCB1;

          // width:293px;height:219px;
          >img {
            transform: scale(1.08);
          }

          .hid-el {
            // display: inline-block;
            opacity: 1;

            transition: .1s all linear;
          }
        }
      }
    }

    &.n-vd {
      .tabs {
        margin-top: 0px;
      }
    }
  }
}


</style>